scss - sass-- watch

Sass @each con múltiples variables

Question

Acabo de empezar 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 que 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?

Answer 1

Acabo de encontrar esto, tengo la respuesta para ti. En Sass, realmente puedes tener una lista multidimensional, así que en lugar de construir variables individuales, crearías una variable para contenerlas todas, luego pasarás 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 como si tuviera listas unidimensionales siempre y cuando cada dimensión anidada esté separada de una 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 con hash. Con esto, podemos reescribir mi respuesta anterior de la siguiente manera para asemejarnos 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

Answer 2

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

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

Recomendaría revisar el registro de cambios para ver si hay incompatibilidades hacia atrás, si está actualizando Sass.

Sass referencia para tareas múltiples con @each

Answer 3

Estoy en el mismo barco (principiante a 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 puedes encontrar nada más. ¡Espero eso ayude! Apreciaría un método mejor también :)

Answer 4

Otra forma en que lo usé si alguien lo necesita:

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

Answer 5

Otra solución podría ser crear diferentes listas y "comprimirlas".

//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. (fue mi caso)