Sass @each avec plusieurs variables

Question

Je commence juste avec Sass et Compass, et je l'aime. Quelque chose que je voudrais faire est de profiter de la fonction @each pour simplifier les tâches répétitives. Cependant, je n'ai vu que des exemples de @each en insérant une variable, et j'aimerais pouvoir utiliser plusieurs variables.

La méthode standard (du Sass Reference):

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

Ce qui est génial, mais je voudrais pouvoir faire quelque chose comme:

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

Est-ce possible?

Answer 1

Je suis dans le même bateau (débutant à Sass/Compass) et j'ai dû faire quelque chose de similaire. Voici ce que je suis venu avec, en utilisant des listes imbriquées:

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

Ce n'est pas la solution la plus élégante, mais il devrait fonctionner si vous ne trouvez rien d'autre. J'espère que cela aide! J'apprécierais une meilleure méthode aussi :)

Answer 2

Je suis juste tombé sur ceci, ai la réponse pour vous. Sass, vous pouvez effectivement avoir une liste multidimensionnelle, donc au lieu de construire des variables individuelles, vous souhaitez créer une variable pour les contenir tous, puis en boucle sur eux:

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

@each $animal in $zoo { 
    .#{nth($animal, 1)}-icon { 
    background-color: nth($animal, 2); 
    } 
} 

Vous pouvez avoir des listes multidimensionnelles comme vous le feriez avoir des listes unidimensionnelles tant que chaque dimension imbriquée est séparée d'une manière différente (dans notre cas, les virgules et les espaces).

Mise à jour le 24 octobre 2013

Sass 3.3, il existe un nouveau type de données appelé maps qui sont un ensemble d'éléments de hachage. Avec cela, on peut réécrire ma réponse précédente de la manière suivante à ressembler beaucoup plus étroitement le résultat souhaité:

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

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

Vous pouvez le voir en action sur au SassMeister

Answer 3

Une autre façon je si quelqu'un en a besoin :

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

Answer 4

Cette fonctionnalité est prise en charge pour Sass 3.3.0 et supérieur (je viens de mettre à jour de 3.2.14 à 3.4.4 pour l'utiliser).

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

Je recommande à check the changelog pour incompatibilités en arrière, si vous mettez à jour Sass.

Sass reference for multiple assignments with @each

Answer 5

Une autre solution pourrait être de créer différentes listes et "zip" eux.

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

Probablement cette solution est plus compliquée à mantenir que les autres, mais si vous utilisez une liste plus d'une fois, vous pouvez gagner du temps. (Était mon cas)