使用参数时，带有@for的SASS / SCSS @mixin不起作用[重复]

Question

这个问题已经在这里有了答案：

• CSS属性作为SASS mixin值[重复] 1个答案

我正在尝试使用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。

Answer 1

只需插值$property ...

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

演示