sass-site/source/documentation/at-rules/control/each.liquid

---
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 %}