mirror of
https://github.com/danog/sass-site.git
synced 2024-12-14 10:28:05 +01:00
71 lines
2.2 KiB
Plaintext
71 lines
2.2 KiB
Plaintext
|
---
|
|||
|
|
title: "@each"
|
|||
|
|
introduction: >
|
|||
|
|
The `@each` rule makes it easy to emit styles or evaluate code for each
|
|||
|
|
element of a [list](/documentation/values/lists) or each pair in a
|
|||
|
|
[map](/documentation/values/maps). It’s great for repetitive styles that only have a
|
|||
|
|
few variations between them. It’s usually written `@each <variable> in
|
|||
|
|
<expression> { ... }`, where the
|
|||
|
|
[expression](/documentation/syntax/structure#expressions) returns a list. The block is
|
|||
|
|
evaluated for each element of the list in turn, which is assigned to the given
|
|||
|
|
variable name.
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
{% render 'code-snippets/example-each-list' %}
|
|||
|
|
|
|||
|
|
{% markdown %}
|
|||
|
|
## With Maps
|
|||
|
|
|
|||
|
|
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.
|
|||
|
|
{% endmarkdown %}
|
|||
|
|
|
|||
|
|
{% render 'code-snippets/example-each-map' %}
|
|||
|
|
|
|||
|
|
{% markdown %}
|
|||
|
|
## Destructuring
|
|||
|
|
|
|||
|
|
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.
|
|||
|
|
|
|||
|
|
[`null`]: /documentation/values/null
|
|||
|
|
{% endmarkdown %}
|
|||
|
|
|
|||
|
|
{% codeExample 'each' %}
|
|||
|
|
$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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
===
|
|||
|
|
$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
|
|||
|
|
{% endcodeExample %}
|
|||
|
|
|
|||
|
|
{% funFact %}
|
|||
|
|
Because `@each` supports destructuring and [maps count as lists of lists][],
|
|||
|
|
`@each`'s map support works without needing special support for maps in
|
|||
|
|
particular.
|
|||
|
|
|
|||
|
|
[maps count as lists of lists]: /documentation/values/maps
|
|||
|
|
{% endfunFact %}
|