{% render '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.

{% render '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.

{% 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.

{% endfunFact %}