Циклы: @each и @for

Цикл повторяет блок кода для каждого элемента списка или для каждого числа из диапазона. В Sass циклы нужны, чтобы генерировать CSS: один короткий цикл превращается в десятки похожих классов — цветов, отступов, ширин колонок. Браузер получает готовые классы.

Интерполяция

Чтобы составить имя класса из значения, вставьте его в селектор через #{}. Это интерполяция:

// styles/main.scss
$name: "primary";
 
.text-#{$name} {
  color: #2563eb;
}

.text-primary {
  color: #2563eb;
}

Без скобок запись .text-$name — синтаксическая ошибка: в селекторе Sass переменные не ищет.

@each по списку

@each по очереди берёт элементы списка в переменную. Служебные классы получают свою папку — создайте styles/utilities/_text-align.scss:

// styles/utilities/_text-align.scss
@each $align in left, center, right {
  .text-#{$align} {
    text-align: $align;
  }
}

// styles/main.scss
@use "utilities/text-align";

.text-left {
  text-align: left;
}
 
.text-center {
  text-align: center;
}
 
.text-right {
  text-align: right;
}

Три правила из четырёх строк. Добавьте в список justify — появится четвёртый класс.

@each по карте

С картой цикл берёт две переменные — ключ и значение. Здесь цвета темы превращаются в классы текста и фона:

// styles/utilities/_colors.scss
$colors: (
  "primary": #2563eb,
  "success": #16a34a,
  "danger": #dc2626,
);
 
@each $name, $color in $colors {
  .bg-#{$name} {
    color: white;
    background: $color;
  }
}

// styles/main.scss
@use "utilities/colors";

.bg-primary {
  color: white;
  background: #2563eb;
}
 
.bg-success {
  color: white;
  background: #16a34a;
}
 
.bg-danger {
  color: white;
  background: #dc2626;
}

<style>
  .bg-primary {
    color: white;
    background: #2563eb;
  }
 
  .bg-success {
    color: white;
    background: #16a34a;
  }
 
  .bg-danger {
    color: white;
    background: #dc2626;
  }
</style>
 
<p class="bg-primary">Информация</p>
<p class="bg-success">Сохранено</p>
<p class="bg-danger">Ошибка</p>

@for — счёт

@for повторяет блок для чисел из диапазона. from 1 through 4 включает 4, from 1 to 4 останавливается перед ним. Вот шкала внешних отступов с шагом 8px:

// styles/utilities/_spacing.scss
@for $i from 1 through 4 {
  .mt-#{$i} {
    margin-top: $i * 8px;
  }
}

// styles/main.scss
@use "utilities/spacing";

.mt-1 {
  margin-top: 8px;
}
 
.mt-2 {
  margin-top: 16px;
}
 
.mt-3 {
  margin-top: 24px;
}
 
.mt-4 {
  margin-top: 32px;
}

Какой цикл выбрать

Есть ещё @while, который повторяет блок, пока условие истинно, но @each и @for покрывают почти все случаи и не могут зациклиться навсегда.

Частая ошибка

Циклы позволяют легко сгенерировать гораздо больше CSS, чем нужно сайту. Десять цветов на шесть свойств на пять точек перелома — это триста классов, большинство из которых никогда не используется, и CSS-файл становится тяжёлым. Генерируйте только то, что нужно дизайну, и проверяйте размер скомпилированного файла после добавления цикла.