Sass Each Loops

How it works

A map associates a key with a value. @each can unpack each pair into local variables. That lets the film-club card use compact and comfortable variants without hand-copying the selector pattern. The map is deliberately short and product-owned. Generating every conceivable size and state would create CSS that most pages never use.

Run the code

Use Dart Sass 1.107.0 in a separate learning folder. Install Node.js, then run npm install --save-dev --save-exact sass@1.107.0. Save every file below with its shown path. Run npx sass each.scss each.css --no-source-map from that folder. Browsers receive compiled CSS, not Sass.

The existing Sass playground uses legacy LibSass 3.6.2 and cannot run modern modules. The compiled CSS preview uses the isolated HTML/CSS editor; it does not compile Sass online. Preloading does not execute the preview. Apache, MySQL and PHP are not required.

Example

each.scss

Download each.scss — save at the shown relative path.

$spaces: (
  compact: 8px,
  comfortable: 20px,
);
@each $name, $space in $spaces {
  .screening-#{$name} {
    padding: $space;
  }
}

Expected CSS

.screening-compact {
  padding: 8px;
}
.screening-comfortable {
  padding: 20px;
}

Interpolation inserts the map key into the class name; the length remains a typed value in padding. The generated names are a public interface for HTML, so changing a key can break a caller even if compilation still succeeds.

Preview compiled CSS — choose Run code. Change and compile Sass locally first.