Dyrektywa @each w SASS
Aby zastosować styl
do listy obiektów używa się
dyrektywy @each. Zapisuje się ją
następująco:
@each $var (zmienna) in (lista wartości)
Zasada działania tej dyrektywy polega na tym, że
ustawia ona dla każdej wartości
z listy zmienną $var,
a następnie wyprowadza ją w każdym stylu.
Rozważmy przykład:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Wynik kompilacji:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Opowiedz, jaki będzie wynik kompilacji następującego kodu:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
