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

我对sass很陌生。我用不同的值定义了14个不同的变量$skill-1、$skill-2等，并调用一个mixin到不同的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;
    }

---

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

但是您可以将所有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;
}

或者可以使用a（然后您也可以使用不是数字的键，并且可以生成语义上更有意义的ID——如果这更有意义的话）

---

非常感谢。这很有帮助。

$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);
   }
}