mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 18:07:35 +01:00
8e97e71e66
* Fix invalid semicolon on SASS example * Fix wrong argument reference * Fix invalid assignment to variable due to scope
70 lines
2.1 KiB
Plaintext
70 lines
2.1 KiB
Plaintext
---
|
||
title: "@each"
|
||
introduction: >
|
||
The `@each` rule makes it easy to emit styles or evaluate code for each
|
||
element of a [list](../../values/lists) or each pair in a
|
||
[map](../../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](../../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.
|
||
---
|
||
|
||
<%= partial 'code-snippets/example-each-list' %>
|
||
|
||
## 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.
|
||
|
||
<%= partial 'code-snippets/example-each-map' %>
|
||
|
||
## 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`]: ../../values/null
|
||
|
||
<% example do %>
|
||
$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
|
||
<% end %>
|
||
|
||
<% fun_fact do %>
|
||
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]: ../../values/maps
|
||
<% end %>
|