Последняя задача показала, как директива @for использует начальное и конечное значение для циклического цикла определенное количество раз. Sass также предлагает директиву @each которая @each каждый элемент в списке или карте. На каждой итерации переменная присваивается текущему значению из списка или карты.
@each $ color в синем, красном, зеленом {Карта имеет несколько иной синтаксис. Вот пример:
. # {$ color} -text {color: $ color;}
}
$ colors: (color1: blue, color2: red, color3: green);Обратите внимание, что
@each $ key, $ color в $ colors {
. # {$ color} -text {color: $ color;}
}
$key переменная $key необходима для ссылки на ключи на карте. В противном случае, скомпилированный CSS будет иметь color1 , color2 ... в нем. Оба приведенных выше примера кода преобразуются в следующий CSS: .blue-text {
цвет синий;
}
.red-text {
красный цвет;
}
.green-text {
цвет: зеленый;
}
Напишите директиву @each которая проходит через список: blue, black, red и назначает каждую переменную классу .color-bg , где часть «цвет» изменяется для каждого элемента. Каждый класс должен установить background-color соответствующего цвета.