De @each directive in SASS
Om stijl toe te passen
op een lijst van objecten gebruikt men
de directive @each. Het wordt als
volgt genoteerd:
@each $var (variabele) in (lijst van waarden)
De essentie van de werking van deze directive is dat
het voor elke waarde
uit de lijst de variabele $var instelt,
en deze vervolgens in elke stijl uitvoert.
Laten we een voorbeeld bekijken:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Resultaat van compilatie:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Vertel, wat zal het resultaat zijn van de compilatie van de volgende code:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
