@each

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

SCSS Syntax

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

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

С картами permalinkС картами

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

SCSS Syntax

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

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

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

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

SCSS Syntax

$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;
  }
}

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

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