Direktyva @each SASS
Kad pritaikytumėte stilių
objektų sąrašui, naudojama
direktyva @each. Ji rašoma
taip:
@each $var (kintamasis) in (reikšmių sąrašas)
Šios direktyvos esmė ta, kad
ji kiekvienai reikšmei iš sąrašo
nustato kintamąjį $var,
o tada išveda jį kiekviename style.
Panagrinėkime pavyzdį:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Kompiliavimo rezultatas:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Paaiškinkite, koks bus kompiliavimo rezultatas šiame kode:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
