Sass @each with multiple variables

Question

I'm just getting started with Sass and Compass, and I'm loving it. Something I'd like to do is take advantage of the @each function to simplify repetitive tasks. However, I've only seen examples of @each inserting one variable, and I'd like to be able to use multiple variables.

The standard way (from the Sass Reference):

@each $animal in puma, sea-slug, egret, salamander {   .#{$animal}-icon {     background-image: url('/images/#{$animal}.png');   } } 

Which is great, but I'd like to be able to do something like:

@each {$animal $color} in {puma black}, {sea-slug green}, {egret brown}, {salamander red} {   .#{$animal}-icon {     background-color: #{$color};   } } 

Is this possible?

Answer 1

Just came across this, have the answer for you. In Sass, you can actually have a multidimensional list, so instead of constructing individual variables, you'd create one variable to hold them all, then loop over them:

$zoo: puma black, sea-slug green, egret brown, salamander red;  @each $animal in $zoo {   .#{nth($animal, 1)}-icon {     background-color: nth($animal, 2);   } } 

You can have multidimensional lists just like you would have single dimensional lists as long as each nested dimension is separated in a different manner (in our case, commas and spaces).

UPDATE Oct 24, 2013

In Sass 3.3, there is a new data type called maps which are a hashed set of items. With this, we can rewrite my previous answer in the following way to much more closely resemble the desired result:

$zoo: ("puma": black, "sea-slug": green, "egret": brown, "salamander": red);  @each $animal, $color in $zoo {     .#{$animal}-icon {         background-color: $color;     } } 

You can see this in action over at SassMeister