The Sass @each rule runs a block once for every item in a list or every pair in a map. It is ideal for repetitive styles that differ by a small set of values (sizes, names, tokens).
Write @each $item in $list { … }. Each element is assigned to $item in turn. Use interpolation (#{$item}) to build selectors and property values. The loop is compile-time only — browsers never see @each.
Per the Sass docs: emit styles for each list element or each map key/value pair when variations are few and known up front.
@each vs @for.Prefer @each when you already have the values. Prefer @for when you need to count a numeric range.
$sizes: 40px, 50px, 80px;
@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
}
}Pattern: collection → @each $var in … → emit CSS per item.
Three common ways to write @each:
| Form | Meaning |
|---|---|
@each $item in $list | One variable per list element |
@each $key, $value in $map | Key then value for every map pair |
@each $a, $b, $c in $rows | Destructure each inner list (missing slots → null) |
Maps count as lists of key/value lists, so map looping works through the same destructuring idea — no special map-only keyword beyond naming two variables.
Short, copy-ready snippets. Open View Compiled CSS for verified output.
Generate matching icon utilities from one size list.
$sizes: 40px, 50px, 80px;
@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
}
}@each $size in $sizes.#{$size} into the class name.$size for font-size, height, and width.Keys become class names; values become glyph content.
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
@each $name, $glyph in $icons {
.icon-#{$name}:before {
display: inline-block;
font-family: "Icon Font";
content: $glyph;
}
}@each $name, $glyph in $icons..icon-#{$name}:before from the key.content from the value.Pull name, glyph, and size from each inner row in one step.
$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;
}
}null if a row is short.Generate container max-widths from named breakpoints.
$breakpoints: (
sm: 480px,
md: 768px,
lg: 1024px,
);
@each $name, $width in $breakpoints {
@media (min-width: $width) {
.container-#{$name} {
max-width: $width;
}
}
}@each.@media (min-width: $width).Emit color utilities from a map and outline styles from a state list.
$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;
}
}.btn:#{$state} into :hover, :focus, :active.Most @each bugs are interpolation, output size, or choosing the wrong loop.
Use #{$name} in class names. Plain $name inside a selector will not expand the way you expect.
Every iteration emits real CSS. Keep token sets intentional for production builds.
Destructuring with more variables than values fills the extras with null. Guard with @if when needed.
If you only need 1…n, prefer @for. Reserve @each for known lists and maps.
@each is a core Dart Sass control rule. It is not a browser CSS feature — support means your Sass compiler understands it.
| Implementation | Status |
|---|---|
| Dart Sass | Supported (recommended) |
| LibSass / node-sass | Supported (deprecated toolchain) |
| Ruby Sass | Supported (end-of-life) |
| Browsers | N/A — only see compiled CSS |
Prefer Dart Sass for new projects. SCSS and indented syntax both support @each.
@each $item in $list.@each $key, $value in $map.One line: walk a list or map once, emit CSS per item at compile time.
@each never reaches the browser. Conceptual flow:
1. Evaluate the list or map after `in`
2. Bind $item (or $key/$value / destructured fields)
3. Evaluate the block → emit CSS for this pass
4. Repeat until the collection ends
5. Final stylesheet contains only the generated rulesCount numeric ranges with from/through and from/to.
8 people found this page helpful