Директива @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;
}
}