Sass @each con più variabili

Sto solo iniziando con Sass e Compass e lo amo. Qualcosa che mi piacerebbe fare è sfruttare la funzione @each per semplificare le attività ripetitive. Tuttavia, ho visto solo esempi di @each inserisce una variabile e mi piacerebbe poter utilizzare più variabili.

Il modo standard (dal riferimento Sass ):

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

Che è fantastico, ma mi piacerebbe essere in grado di fare qualcosa come:

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

È ansible?

Sono nella stessa barca (principiante di Sass / Compass) e ho dovuto fare qualcosa di simile. Ecco cosa mi è venuto in mente, usando le liste annidate:

 $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); } } 

Non è la soluzione più elegante ma dovrebbe funzionare se non riesci a trovare altro. Spero che sia d’aiuto! Apprezzerei anche un metodo migliore 🙂

Ho appena trovato questo, ho la risposta per te. In Sass puoi effettivamente avere un elenco multidimensionale, quindi invece di build variabili individuali, devi creare una variabile per conservarle tutte, quindi eseguire il loop su di esse:

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

Puoi avere elenchi multidimensionali proprio come faresti con gli elenchi a una sola dimensione, purché ciascuna dimensione annidata sia separata in un modo diverso (nel nostro caso, virgole e spazi).

AGGIORNAMENTO 24 ottobre 2013

In Sass 3.3, c’è un nuovo tipo di dati chiamato mappe che sono un insieme di elementi con hash. Con questo, possiamo riscrivere la mia risposta precedente nel seguente modo per somigliare molto più strettamente al risultato desiderato:

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

Puoi vederlo in azione su SassMeister

Un altro modo che ho usato se qualcuno ne avesse bisogno:

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

Questa funzionalità è supportata per Sass 3.3.0 e versioni successive (ho appena aggiornato dal 3.2.14 al 3.4.4 per poterlo utilizzare).

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

Ti consiglio di controllare il log delle modifiche per le incompatibilità con le versioni precedenti, se stai aggiornando Sass.

Riferimento Sass per più incarichi con @each

Un’altra soluzione potrebbe essere quella di creare elenchi diversi e “comprimerli”.

 //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; } } 

Probabilmente questa soluzione è più complicata da mantenere degli altri, ma se usi una lista più di una volta, puoi risparmiare tempo. (era il mio caso)