Directiva @each en SASS
Para aplicar un estilo
a una lista de objetos se utiliza
la directiva @each. Se escribe
de la siguiente manera:
@each $var (variable) in (lista de valores)
La esencia del funcionamiento de esta directiva es que
establece en cada valor
de la lista la variable $var,
y luego la muestra en cada estilo.
Consideremos un ejemplo:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Resultado de la compilación:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Explique, cuál será el resultado de la compilación del siguiente código:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
