SASS/SCSS @mixin with @for not working when using parameters [duplicate]

Question

This question already has an answer here:

CSS property as SASS mixin value [duplicate] (1 answer)

Closed 7 years ago.

I'm trying to create some CSS selectors using SASS @mixin and @for directive, like this:

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

The above works, but when I change background-color: nth($colors, $i); to $property: nth($colors, $i); the CSS is compiled without errors, but I get no output from this mixin. Can anyone tell me why is my logic faulty? I'm using SASS 3.3.0.rc.2.

Answer 1

Just interpolate the $property...

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

DEMO