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.
Just interpolate the $property
...
@mixin taxonomy-color($property) {
@for $i from 1 through length($color-names) {
.#{nth($color-names, $i)} {
#{$property}: nth($colors, $i);
}
}
}