sass函数变量传参报错问题

Question

想写一个自动生成boxshadow的星空背景，我想用$list储存坐标位置如(num,num),(num,num)但是，在boxsha的传参一直报错

Error: src/view/sass/test.scss
Error: Invalid null operation: ""326px " plus null".
        on line 140 of src/view/sass/test.scss
>>         $str: $str + $w+'px '+$h+'px '+'#fff, ';
   --------------^

但是调用方式改变一下boxsha($list) 变为 boxsha($list())这样就不会报错；而且我在boxsha中获取的$length: length($list)数据也不对。

@function boxsha($list) {
  $str: '';
  $length: length($list);
  $mycount: 0;
  @each $one in $list {
    $mycount: $mycount + 1;
    @each $w, $h in $one {
      @if $mycount == $length {
        $str: $str + $w+'px '+$h+'px '+'#fff;';
      } @else {
        $str: $str + $w+'px '+$h+'px '+'#fff, ';
      }
    }
  }
  @return $str;
}


$list: ();
$num: 20;
@while $num > 0 {
  $w: random(400);
  $h: random(400);
  $ache: ($w, $h);
  $list: append($list, $ache);
  $num: $num - 1;
}

.start1 {
  position: absolute;
  width: 10px;
  height: 10px;
  box-shadow: unquote(boxsha($list));
  background-color: #fff;
}

---

打印了一下list第一个居然只有一个数字。。使用join后也达不到效果，应该用map类型

Answer 1

最终实现方案是做一个背景...然后今天下午重新打开....脑子不抽了。。map，list纯粹是画蛇添足了。

代码如下
浏览地址

@function boxsha($num, $count) {
  $str: '';
  @while $num > 0 {
    $w: random($count);
    $h: random($count);
    @if  $num == 1 {
      $str: $str + $w+'px '+$h+'px '+'#fff';
    }  @else {
      $str: $str + $w+'px '+$h+'px '+'#fff, ';
    }
    $num: $num - 1;
  }
  @return $str;
}
.start {
  width: 400px;
  height: 400px;
  background: #000;
  position: relative;
  @each $index in (1, 2 , 3) {
    .start#{$index} {
      background-color: transparent;
      position: absolute;
      width: unquote($index + 'px');
      height: unquote($index + 'px');
      border-radius: 50%;
      box-shadow: unquote(boxsha(1 / $index * 100, 400));
      animation: starAnimation 30s linear infinite;
      &:after {
        content: "";
        display: block;
        top: 400px;
        position: absolute;
        width: unquote($index + 'px');
        height: unquote($index + 'px');
        border-radius: 50%;
        box-shadow: unquote(boxsha(1 / $index * 100, 400));
      }
    }
  }
}
@keyframes starAnimation{
  0% {
    transform:translateY(0)
  }
  to {
    transform:translateY(-400px)
  }
}

sass函数