@each-direktiivi SASS:ssa
Tyylin soveltamiseksi
objektilistalle käytetään
@each-direktiiviä. Se kirjoitetaan
seuraavasti:
@each $var (muuttuja) in (arvolista)
Tämän direktiivin toiminnan ydin on, että
se asettaa jokaisen arvon
listasta muuttujan $var,
ja sitten tulostaa sen jokaisessa tyylissä.
Tarkastellaan esimerkkiä:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Kokoamisen tulos:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Kerro, mikä on seuraavan koodin kääntämisen tulos:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
