Diretiva @each no SASS
Para aplicar um estilo
a uma lista de objetos, usa-se
a diretiva @each. Ela é escrita
da seguinte forma:
@each $var (variável) in (lista de valores)
A essência do funcionamento desta diretiva é que
ela define para cada valor
da lista a variável $var,
e então a output em cada estilo.
Vamos considerar um exemplo:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Resultado da compilação:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Conte qual será o resultado da compilação do seguinte código:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
