SASS / SCSS @mixin和@for在使用参数时不起作用[重复]答案

【问题标题】：SASS/SCSS @mixin with @for not working when using parameters [duplicate]SASS / SCSS @mixin和@for在使用参数时不起作用[重复]
【发布时间】：2014-04-04 16:25:24
【问题描述】：

我正在尝试使用 SASS @mixin 和 @for 指令创建一些 CSS 选择器，如下所示：

$colors: $comedy, $drama, $thriller, $scifi;
$color-names: comedy, drama, thriller, scifi;

@mixin taxonomy-color($property) {
  @for $i from 1 through length($color-names) {
    .#{nth($color-names, $i)}  {
      background-color: nth($colors, $i);
    }
  }
}

@include taxonomy-color(background-color);

上述方法有效，但是当我将 background-color: nth($colors, $i); 更改为 $property: nth($colors, $i); 时，CSS 编译时没有错误，但我没有从这个 mixin 中得到任何输出。谁能告诉我为什么我的逻辑有问题？我正在使用 SASS 3.3.0.rc.2。

【问题讨论】：

标签： css variables sass mixins

【解决方案1】：

只需插入 $property...

@mixin taxonomy-color($property) {
  @for $i from 1 through length($color-names) {
    .#{nth($color-names, $i)}  {
      #{$property}: nth($colors, $i);
    }
  }
}

DEMO

【讨论】：