Η οδηγία @each στο SASS
Για να εφαρμοστεί ένα στυλ
σε μια λίστα αντικειμένων χρησιμοποιούμε
την οδηγία @each. Γράφεται
ως εξής:
@each $var (μεταβλητή) in (λίστα τιμών)
Η ουσία της λειτουργίας αυτής της οδηγίας είναι ότι
ορίζει σε κάθε τιμή
από τη λίστα τη μεταβλητή $var,
και στη συνέχεια την εκφράζει σε κάθε στυλ.
Ας δούμε ένα παράδειγμα:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Αποτέλεσμα μεταγλώττισης:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Πείτε μας ποιο θα είναι το αποτέλεσμα της μεταγλώττισης του ακόλουθου κώδικα:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}