Sass @each variable interpolation [duplicate]

Question

This question already has an answer here:

• Creating or referencing variables dynamically in Sass 5 answers

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

Answer 1

With Maptastic Maple (v3.3), you can use some simple map functions here

$message-box-types:
  foo #ccc,
  bar #ffffd

@each $type, $color in $message-box-types
  %#{$type}-box
    @extend %message-box
    border-color: $color
    color: $color
    background-color: lighten($color, 20%)