Sass @each variable interpolation [duplicate]
In my newest site I am trying to make a massive effort to use Sass features to make my life easier.
I am writing some simple error box styles and thought that using each would simplify them a bit.
I have the following:
$message-box-types: error success normal
@each $type in $message-box-types
%#{$type}-box
@extend %message-box
border-color: $message-#{$type}
color: $message-#{$type}
background-color: lighten($message-#{$type}, 20%)
The errors identify both lines with $message-#{$type}
I had a similar issue with a previous @each statement I was trying to write but ended up ignoring it and writing it out in scratch as I thought it was something Sass couldn't handle.
Anyone have any ideas?
Neil
Solution 1:
With Maptastic Maple (v3.3), you can use some simple map functions here
$message-box-types:
foo #ccc,
bar #ddd
@each $type, $color in $message-box-types
%#{$type}-box
@extend %message-box
border-color: $color
color: $color
background-color: lighten($color, 20%)