Direktíva @each v SASS
Na to, aby sme aplikovali štýl
na zoznam objektov, používame
direktívu @each. Zapíše sa
nasledovne:
@each $var (premenná) in (zoznam hodnôt)
Podstata práce tejto direktívy spočíva v tom, že
nastaví do každej hodnoty
zo zoznamu premennú $var,
a potom ju vypíše v každom štýle.
Pozrime sa na príklad:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Výsledok kompilácie:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Popíšte, aký bude výsledok kompilácie nasledujúceho kódu:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
