Sass @each Rule

What You’ll Learn

Sass @each emits styles or runs code for every item in a list or every pair in a map. This page covers list loops, map loops, destructuring, practical token generation, and five compiled examples.

What Is @each?

Official docs: 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 is great for repetitive styles that only have a few variations between them.

It is usually written @each <variable> in <expression> { … }, where the expression returns a list. The block runs once per element, and that element is assigned to the variable name.

• Compile-time only—browsers never see @each.
• Ideal when you already have the values (sizes, names, tokens).
• Works with lists, maps, and nested lists (destructuring).
• Use interpolation (#{$name}) to build selectors and property values.

📝 Syntax

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

🗺️ With Maps

Official docs: iterate every key/value pair with @each $key, $value in $map { … }. The key is assigned to the first variable and the value to the second.

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    content: $glyph;
  }
}

🧩 Destructuring

Official docs: if you have a list of lists, write @each $a, $b, $c in $rows so each inner list’s values are assigned to those variables. Missing positions become null.

⚖️ @each vs @for

Examples Gallery

Each example generates multiple CSS rules from one loop. Open View Compiled CSS for verified output.

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
}

$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;
  }
}

.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
  font-size: 12px;
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
  font-size: 16px;
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
  font-size: 10px;
}

$breakpoints: (
  sm: 480px,
  md: 768px,
  lg: 1024px,
);

@each $name, $width in $breakpoints {
  @media (min-width: $width) {
    .container-#{$name} {
      max-width: $width;
    }
  }
}

@media (min-width: 480px) {
  .container-sm {
    max-width: 480px;
  }
}
@media (min-width: 768px) {
  .container-md {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container-lg {
    max-width: 1024px;
  }
}

$tones: (
  success: #2f9e64,
  warning: #e6a700,
  danger: #d64550,
);

@each $name, $color in $tones {
  .badge-#{$name} {
    background: $color;
    color: #fff;
  }

  .text-#{$name} {
    color: $color;
  }
}

$states: hover, focus, active;

@each $state in $states {
  .btn:#{$state} {
    outline: 2px solid currentColor;
  }
}

.badge-success {
  background: #2f9e64;
  color: #fff;
}

.text-success {
  color: #2f9e64;
}

.badge-warning {
  background: #e6a700;
  color: #fff;
}

.text-warning {
  color: #e6a700;
}

.badge-danger {
  background: #d64550;
  color: #fff;
}

.text-danger {
  color: #d64550;
}

.btn:hover {
  outline: 2px solid currentColor;
}

.btn:focus {
  outline: 2px solid currentColor;
}

.btn:active {
  outline: 2px solid currentColor;
}

🚀 Real-World Use Cases

• Utility classes — spacing, icon sizes, color badges.
• Icon fonts — name → glyph maps.
• Breakpoints — generate media queries from one map.
• Theme scales — tones, z-index layers, font steps.
• State selectors — hover / focus / active lists.

⚠️ Common Pitfalls

• Invalid selectors from values — .icon-40px is fine; odd units or spaces may need careful interpolation.
• Huge CSS output — looping big maps can explode file size.
• Wrong variable count — destructuring with too many names fills extras with null.
• Mutating during the loop — keep the source list/map stable and simple.
• Using @each for numeric ranges — prefer @for when you only need to count.

💡 Best Practices