Sass @each con múltiples variables

Estoy empezando con Sass y Compass, y me encanta. Algo que me gustaría hacer es aprovechar la función @each para simplificar las tareas repetitivas. Sin embargo, solo he visto ejemplos de @each insertando una variable, y me gustaría poder usar múltiples variables.

La forma estándar (de la referencia Sass ):

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

Lo cual es genial, pero me gustaría poder hacer algo como:

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

es posible?

Estoy en el mismo barco (principiante de Sass / Compass) y tuve que hacer algo similar. Esto es lo que se me ocurrió, usando listas anidadas:

 $flash_types: (success #d4ffd4) (error #ffd5d1); @each $flash_def in $flash_types { $type: nth($flash_def, 1); $colour: nth($flash_def, 2); &.#{$type} { background-color: $colour; background-image: url(../images/#{$type}.png); } } 

No es la solución más elegante, pero debería funcionar si no puede encontrar nada más. ¡Espero eso ayude! Apreciaría un método mejor también 🙂

Solo encontré esto, tengo la respuesta para ti. En Sass, en realidad puedes tener una lista multidimensional, así que en lugar de construir variables individuales, crearías una variable para mantenerlas todas, y luego recorrerlas:

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

Puede tener listas multidimensionales de la misma manera que tendría listas de dimensiones únicas siempre que cada dimensión anidada se separe de manera diferente (en nuestro caso, comas y espacios).

ACTUALIZACIÓN 24 de octubre de 2013

En Sass 3.3, hay un nuevo tipo de datos llamado mapas que son un conjunto de elementos hash. Con esto, podemos reescribir mi respuesta anterior de la siguiente manera para que se parezca mucho más al resultado deseado:

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

Puedes ver esto en acción en SassMeister

Otra forma que utilicé si alguien lo necesita:

 $i:0; @each $name in facebook, twitter, google_plus, instagram, youtube, pinterest { $i:$i+1; } 

Esta funcionalidad es compatible con Sass 3.3.0 y superior (acabo de actualizar de 3.2.14 a 3.4.4 para poder usarlo).

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

Recomiendo comprobar el registro de cambios en busca de incompatibilidades inversas si actualiza Sass.

Referencia Sass para múltiples asignaciones con @each

Otra solución podría ser crear listas diferentes y “zip”.

 //Create lists $animals: puma, sea-slug, egret, salamander; $animals-color: black, green, brown, red; //Zip lists $zoo: zip($animals, $animals-color); //Do cycle @each $animal, $color in $zoo { .#{$animal}-icon { background-color: $color; } } 

Probablemente esta solución sea más complicada de mantener que las otras, pero si usa una lista más de una vez, puede ahorrar tiempo. (era mi caso)