@each-direktivet i SASS
För att tillämpa en stil
på en lista med objekt använder man
directiven @each. Den skrivs
på följande sätt:
@each $var (variabel) in (värdenlista)
Kärnan i hur denna direktiv fungerar är att
den sätter varje värde
från listan i variabeln $var,
och sedan matar den ut den i varje stil.
Låt oss titta på ett exempel:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Resultat av 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");
}
Berätta vad som blir resultatet av kompilering av följande kod:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
