Die @each Direktief in SASS
Om 'n styl toe te pas
op 'n lys van voorwerpe, word die
@each direktef gebruik.
Dit word soos volg geskryf:
@each $var (veranderlike) in (lys van waardes)
Die werking van hierdie direktef is dat
dit elke waarde in die lys toeken aan die
veranderlike $var,
en dit dan in elke styl uitskryf.
Kom ons kyk na 'n voorbeeld:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Die resultaat van 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");
}
Verduidelik wat die resultaat van kompilering van die volgende kode sal wees:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
