I want to dynamically create mixins in SASS, named after each item in the list, but it doesn't seem to work.
I tried this but I get an error:
$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch
@each $event-icon in $event-icons
@mixin event-icon-#{$event-icon}
background-position: -($event-icon-width * $i) 0
Error:
Invalid CSS after "": expected expression (e.g. 1px, bold), was "#{$event-icon}"
Is this usage not supported by SASS? I couldn't find anything in the manual about it.
Variable interpolation in @mixins does not appear to be supported currently.
The SASS documentation calls this #{} interpolation
and describes it like this:
Interpolation: #{}
You can also use SassScript variables in selectors and property names using #{} interpolation syntax:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
Per the documentation, interpolation of variable names only appears to be supported for selectors and property names, and not for @mixin
s. If you'd like that feature, you may want to file an Issue for it, although this one may already be tracking what you're describing.
Edit:
Are you sure you need to use a @mixin
to accomplish the kind of styling you're talking about? Could you just use a selector with interpolation? For example, would this work:
$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch
@for $i from 1 to length($event-icons)
$event-icon: nth($event-icons, $i)
.event-icon-#{$event-icon}
background-position: -($event-icon-width * $i) 0