A @each direktíva a SASS-ban
Ahhoz, hogy stílust alkalmazzunk
egy objektumlistára, használjuk a
@each direktívát. A következőképpen
írjuk:
@each $var (változó) in (értéklista)
Ennek a direktívának a lényege, hogy
beállítja a $var változót
a lista minden értékére,
majd mindegyik stílusban kiírja azt.
Nézzünk egy példát:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
A fordítás eredménye:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Mesélje el, mi lesz a következő kód fordításának eredménye:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
