La directive @each dans SASS
Pour appliquer un style
à une liste d'objets, on utilise
la directive @each. On l'écrit
de la manière suivante :
@each $var (variable) in (liste de valeurs)
Le principe de fonctionnement de cette directive est qu'elle
affecte à chaque valeur
de la liste la variable $var,
puis l'utilise dans chaque style.
Prenons un exemple :
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Résultat de la compilation :
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Expliquez quel sera le résultat de la compilation du code suivant :
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
