Если в вашем коде Sass есть Map (ассоциативный массив) или список, вам необязательно обращаться к каждому ключу по отдельности – вы можете перебрать их с помощью цикла @each. Этот цикл выполняет итерацию значений списка или мапа и для каждого из них выполняет соответствующий блок кода. С его помощью из списка или мапа вы можете легко сгенерировать класс.
Читайте также:
Цикл @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 <список>
Если указанный в цикле список содержит вложенные списки, то цикл присвоит соответствующей переменной значение каждого вложенного списка.