@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;
}
}
Sass Syntax
$sizes: 40px, 50px, 80px
@each $size in $sizes
.icon-#{$size}
font-size: $size
height: $size
width: $size
CSS Output
.icon-40px {
font-size: 40px;
height: 40px;
width: 40px;
}
.icon-50px {
font-size: 50px;
height: 50px;
width: 50px;
}
.icon-80px {
font-size: 80px;
height: 80px;
width: 80px;
}
使用映射使用映射 permalink
¥With Maps
你还可以通过将 @each
写入 @each <variable>, <variable> in <expression> { ... }
来迭代映射中的每个键/值对。键分配给第一个变量名称,元素分配给第二个变量名称。
¥You can also use @each
to iterate over every key/value pair in a map by
writing it @each <variable>, <variable> in <expression> { ... }
. The key is
assigned to the first variable name, and the element is assigned to the second.
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;
}
}
Sass 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
CSS Output
.icon-eye:before {
display: inline-block;
font-family: "Icon Font";
content: "\f112";
}
.icon-start:before {
display: inline-block;
font-family: "Icon Font";
content: "\f12e";
}
.icon-stop:before {
display: inline-block;
font-family: "Icon Font";
content: "\f12f";
}
解构解构 permalink
¥Destructuring
如果你有一个列表列表,则可以使用 @each
通过将其写入 @each <variable...> in <expression> { ... }
来自动将变量分配给内部列表中的每个值。这称为解构,因为变量与内部列表的结构相匹配。每个变量名称都分配给列表中相应位置的值,如果列表没有足够的值,则分配给 null
。
¥If you have a list of lists, you can use @each
to automatically assign
variables to each of the values from the inner lists by writing it @each <variable...> in <expression> { ... }
. This is known as destructuring, since
the variables match the structure of the inner lists. Each variable name is
assigned to the value at the corresponding position in the list, or null
if the list doesn’t have enough values.
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;
}
}
Sass 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
CSS Output
.icon-eye:before {
display: inline-block;
font-family: "Icon Font";
content: "\f112";
font-size: 12px;
}
.icon-start:before {
display: inline-block;
font-family: "Icon Font";
content: "\f12e";
font-size: 16px;
}
.icon-stop:before {
display: inline-block;
font-family: "Icon Font";
content: "\f12f";
font-size: 10px;
}
💡 Fun fact:
由于 @each
支持解构,而 映射算作列表的列表 支持解构,因此 @each
的映射支持无需特别支持映射即可工作。
¥Because @each
supports destructuring and maps count as lists of lists,
@each
’s map support works without needing special support for maps in particular.