mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 18:07:35 +01:00
72 lines
2.1 KiB
Plaintext
72 lines
2.1 KiB
Plaintext
---
|
|
title: "@each"
|
|
---
|
|
|
|
The `@each` rule makes it easy to emit styles or evaluate code for each element
|
|
of a [list][] or each pair in a [map][]. 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][] returns a
|
|
list. The block is evaluated for each element of the list in turn, which is
|
|
assigned to the given variable name.
|
|
|
|
[list]: ../values/lists
|
|
[map]: ../values/maps
|
|
[expression]: ../syntax/structure#expressions
|
|
|
|
<%= 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 %>
|