Directive @each in SASS
To apply a style to a list of objects, use the @each directive. It is written as follows:
@each $var (variable) in (list of values)
The gist of this directive is that it sets the variable $var to each value in the list, and then outputs it in each style. Let's look at an example:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Compilation result:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Tell me what the result of compiling the following code will be:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
