Sass @each con múltiples variables

Question

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 (desde el Sass Reference):

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

que es grande, pero me gustaría ser capaz de hacer algo como:

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

Es esto posible?

Answer 1

Estoy en el mismo barco (principiante a Sass/Compass) y tuve que hacer algo similar. Esto es lo que ocurrió con, el uso de 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 se puede encontrar nada más. ¡Espero eso ayude! Apreciaría un método mejor también :)

Answer 2

Acabo de encontrar esto, tengo la respuesta para ti. En Sass, en realidad se puede tener una lista multidimensional, así que en vez de construir las variables individuales, que le cree una variable para contener a todos ellos, a continuación, un bucle sobre ellas:

$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 igual que lo haría tener listas unidimensionales siempre que cada dimensión anidada esté separada de manera diferente (en nuestro caso, comas y espacios).

de actualización cada 24 Oct, 2013

En Sass 3.3, existe un nuevo tipo de datos llamado mapas que son un conjunto de elementos hash. Con esto, podemos volver a escribir mi respuesta anterior de la siguiente manera mucho más se asemejan mucho el resultado deseado:

$zoo: ("puma": black, "sea-slug": green, "egret": brown, "salamander": red); 

@each $animal, $color in $zoo { 
    .#{$animal}-icon { 
     background-color: $color; 
    } 
} 

Esto se puede ver en la acción sobre al SassMeister

Answer 3

Otra forma en que solía si alguien lo necesita :

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

Answer 4

Esta funcionalidad es compatible con Sass 3.3.0 y superior (I acaba de actualizar a 3.2.14 a 3.4.4 con el fin de usarlo).

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

lo recomiendo a check the changelog de incompatibilidades al revés, si está actualizando Sass.

Sass reference for multiple assignments with @each

Answer 5

Otra solución podría ser la creación de diferentes listas y "zip" de ellos.

//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 es más complicada a MANTENER que los otros, pero si se utiliza una lista más de una vez, puede ahorrar tiempo. (era mi caso)