Команда @each

Команда @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;
}

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 03.03.2015
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid