访问迭代器并将其附加到SASS中的变量名中。

Question

我对sass很陌生。我用不同的值定义了14个不同的变量--$skill 1，$SKIL-2等等，并对不同的ID调用一个不同宽度的混合器。

我搞错了

Undefined variable: "$skill-".

这是我的代码样本。

@mixin skill-func($val) {
       & { width : $val; }
    }
    $i: 14;
    @while $i > 0 {
      #skill-#{$i} { 
            @include skill-func ($skill-#{$i})
       }
      $i: $i - 1;
    }

Answer 1

不幸的是，您不能动态地调用这样的变量(没有变量插值-参见字符串插值法的示例)。

但是，您可以将所有14个值保存在一个列表中，然后使用nth()函数调用相应的项。类似于这样的东西：

$skill: 12px, 23px, 42px, 234px, 440px;

@mixin skill-func($val) {
   & { width : $val; }
}

$i: 5;

@while $i > 0 {
  #skill-#{$i} { 
        @include skill-func (nth($skill, $i))
   }
  $i: $i - 1;
}

演示

或者可以使用一个地图 (然后您也可以使用不是数字的键，并且可以生成语义上更有意义的ids -当这更有意义时)。

$skill: (supernarrow:12px, narrow:23px, normal:42px, wide:234px, superwide:440px);

@mixin skill-func($val) {
   & { width : $val; }
}

@each $key, $i in $skill {
  #skill-#{$key} { 
        @include skill-func ($i);
   }
}

演示