Как работает цикл @each в Sass

Development | Amber | Комментировать запись

Если в вашем коде Sass есть Map (ассоциативный массив) или список, вам необязательно обращаться к каждому ключу по отдельности – вы можете перебрать их с помощью цикла @each. Этот цикл выполняет итерацию значений списка или мапа и для каждого из них выполняет соответствующий блок кода. С его помощью из списка или мапа вы можете легко сгенерировать класс.

Читайте также:

• Краткое введение в Sass Maps
• Как работают списки в Sass

Цикл @each имеет следующий синтаксис:

@each $var in <список>

Здесь $var – это переменная, которая будет использоваться внутри цикла для хранения текущего значения из списка или ассоциативного массива. Например:

$shapes: triangle, square, circle;

@each $shape in $shapes {
  .icon-#{$shape} {
    background-image: url('/images/#{$shape}.jpg');
  }
}

$map: (
  h1: 20px,
  h2: 16px,
  h3: 14px
);

@each $element, $size in $map {
  #{$element} {
    font-size: $size;
  }
}

Здесь после директивы идет $shape – это и есть переменная. Цикл @each последовательно присвоит переменной $shape каждое значение элемента из списка $shapes, а затем выведет эти значения на экран.

Если переменная объединяется со строкой или используется как класс или элемент, то перед этой переменной нужно поставить символы #{ и }, — чтобы сообщить компилятору, что вы на самом деле имеете в виду переменную.

Также циклы можно вкладывать в другие циклы, если ваш мап многоуровневый.

Кроме того, цикл @each может одновременно работать с несколькими переменными. В этом случае их нужно разделить запятыми. Синтаксис выглядит так:

@each $var1, $var2, ... in <список>

Если указанный в цикле список содержит вложенные списки, то цикл присвоит соответствующей переменной значение каждого вложенного списка.