@each-direktivet i SASS
For at anvende en stil
til en liste af objekter bruger man
directivet @each. Det skrives
på følgende måde:
@each $var (variabel) in (værdiliste)
Essensen af dette direktiv er, at
det indstiller hver værdi
fra listen i variablen $var,
og derefter udskriver den i hver stil.
Lad os se på et eksempel:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Resultatet af kompilering:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Forklar, hvad resultatet af kompileringen af følgende kode vil være:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
