Question

我对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;
    }

Answer 1

不幸的是，你无法动态调用这样的变量（没有变量插值 - 参见字符串interpolations here的示例）。

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

DEMO

或者可以使用map（那么你也可以使用不是数字的键，并且可以生成语义上更有意义的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);
   }
}

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

1 个答案:

DEMO

DEMO