Множественные значения
Директива @each
также может использовать несколько переменных по следующему принципу:
@each $var1, $var2, ... in <список>
. Если <список> — это список списков, то значение каждого элемента внутреннего
списка будет назначено соответствующей переменной. Например:
scss
@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move) {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move)
.#{$animal}-icon
background-image: url('/images/#{$animal}.png')
border: 2px solid $color
cursor: $cursor
css
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
cursor: default;
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
cursor: pointer;
}
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move;
}
Так как мапы обрабатываются как списки или пары значений, множественное присваивание с ними тоже работает. Например:
scss
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em)
#{$header}
font-size: $size
css
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
Ваша
Поддержка
Поддержка