@each

Правило @each позволяет легко генерировать стили или вычислять код для каждого элемента списка списка или каждой пары в словаре. Это отлично подходит для повторяющихся стилей, имеющих лишь небольшие различия. Обычно оно записывается @each <variable> in <expression> { ... }, где выражение выражение возвращает список. Блок вычисляется для каждого элемента списка по очереди, который присваивается заданному имени переменной.

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}
// SASS
$sizes: 40px, 50px, 80px

@each $size in $sizes
  .icon-#{$size}
    font-size: $size
    height: $size
    width: $size
/* CSS */
.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

Со словарями

Вы также можете использовать @each для итерации по каждой паре ключ/значение в словаре, записав его @each <variable>, <variable> in <expression> { ... }. Ключ присваивается первой переменной, а элемент — второй.

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}
// SASS
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")

@each $name, $glyph in $icons
  .icon-#{$name}:before
    display: inline-block
    font-family: "Icon Font"
    content: $glyph
/* CSS */
.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
}

Деструктуризация

Если у вас есть список списков, вы можете использовать @each для автоматического присвоения переменных каждому значению из вложенных списков, записав его @each <variable...> in <expression> { ... }. Это называется деструктуризацией, так как переменные соответствуют структуре вложенных списков. Каждая переменная получает значение в соответствующей позиции в списке или null, если список не содержит достаточного количества значений.

$icons:
  "eye" "\f112" 12px,
  "start" "\f12e" 16px,
  "stop" "\f12f" 10px;

@each $name, $glyph, $size in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
    font-size: $size;
  }
}
// SASS
$icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px




@each $name, $glyph, $size in $icons
  .icon-#{$name}:before
    display: inline-block
    font-family: "Icon Font"
    content: $glyph
    font-size: $size
/* CSS */
.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
  font-size: 12px;
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
  font-size: 16px;
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
  font-size: 10px;
}

💡 Интересный факт:

Так как @each поддерживает деструктуризацию, и словари считаются списками списков, поддержка словарей в @each работает без необходимости специальной поддержки для словарей.

© 2006–2025 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/at-rules/control/each