Die @each-Direktive in SASS
Um einen Stil auf eine Liste von Objekten
anzuwenden, wird die Direktive
@each verwendet. Sie wird
wie folgt geschrieben:
@each $var (Variable) in (Werteliste)
Der Zweck dieser Direktive ist, dass sie
für jeden Wert in der Liste die Variable
$var setzt
und diese dann in jedem Stil ausgibt.
Betrachten wir ein Beispiel:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Ergebnis der Kompilierung:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
