La direttiva @each in SASS
Per applicare uno stile
a una lista di oggetti si utilizza
la direttiva @each. Si scrive
nel modo seguente:
@each $var (variabile) in (lista di valori)
L'essenza del funzionamento di questa direttiva è che
imposta in ogni valore
della lista la variabile $var,
e poi la utilizza in ogni stile.
Consideriamo un esempio:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Risultato della compilazione:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Spiegate quale sarà il risultato della compilazione del seguente codice:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
