Команда @each позволяет пробегаться по списку значений и к каждому значению применять набор команд. Это, в какой-то мере является разновидностью цикла, но только мы имеем дело не с числовым счётчиком, а списком, значения которого формируем сами.
Синтаксис следующий. Вначале пишется команда @each, затем имя переменной, которая последовательно принимает значения из списка, далее идёт ключевое слово in и список значений разделённый запятыми. Тело цикла пишется внутри фигурных скобок.
@each $var in list1, list2... {
// тело цикла
}
Чтобы воспользоваться текущим значением, обращаемся к нему как #{$var}.
В качестве примера возьмём список популярных браузеров. Для каждого из них вводим отдельный класс и задаём соответствующую фоновую картинку. В Sass это всё запишется в компактной форме.
@each $browser in ie, chrome, firefox, opera {
.#{$browser} {
background: url(../img/#{$browser}.png) no-repeat;
}
}
Здесь мы вводим переменную $browser и список значений: ie, chrome, firefox, opera. Внутри команды создаём класс как .#{$browser} с точкой впереди и к каждому классу добавляем фоновое изображение с уникальным именем графического файла. Вот что в итоге получится.
.ie {
background: url(../img/ie.png) no-repeat;
}
.chrome {
background: url(../img/chrome.png) no-repeat;
}
.firefox {
background: url(../img/firefox.png) no-repeat;
}
.opera {
background: url(../img/opera.png) no-repeat;
}