@each loop over maps in SASS - Browser Rendering Trace

Render Flow - @each loop over maps

Read SASS file

↓

Parse @each loop

↓

Extract map keys and values

↓

Iterate over each key-value pair

↓

Generate CSS rules for each pair

↓

Output compiled CSS

The SASS compiler reads the @each loop, extracts keys and values from the map, then repeats the inner code for each pair, generating CSS rules accordingly.

Render Steps - 3 Steps

Code Added:$colors: (red: #f00, green: #0f0, blue: #00f);

Before

[No boxes visible]

→

After

[No boxes visible]

Defines a map of color names to color codes; no visual change yet because no CSS applied.

🔧 Browser Action:Stores variable in SASS memory; no CSS output.

Code Sample

Creates three colored boxes: red, green, and blue, each styled using the @each loop over the colors map.

SASS

<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>

SASS

$colors: (red: #f00, green: #0f0, blue: #00f);

@each $name, $color in $colors {
  .box.#{$name} {
    background-color: $color;
    width: 5rem;
    height: 5rem;
    margin: 0.5rem;
    display: inline-block;
  }
}

Render Quiz - 3 Questions

After applying the @each loop in render_step 3, what do you see on the page?

A One large box with mixed colors

B Three colored boxes side by side: red, green, and blue

C No boxes visible

D Boxes stacked vertically without color

Common Confusions - 2 Topics

Why don't I see any boxes styled if I only define the map but forget the @each loop?

Defining a map only stores data in SASS; it does not create any CSS rules. The @each loop is needed to generate CSS for each map entry (see render_step 1 vs 3).

💡 Maps hold data; loops create visible styles.

Why does the class name need interpolation like .#{$name}?

Without interpolation, SASS treats the selector literally. Interpolation inserts the variable's value into the selector, creating unique class names (render_step 3).

💡 Use #{} to insert variables into selectors.

Property Reference

SASS Feature	Syntax	Purpose	Visual Effect	Common Use
@each loop	@each $key, $value in $map { ... }	Iterate over map entries	Generates repeated CSS rules	Create multiple classes or styles dynamically
Map	$map: (key1: value1, key2: value2);	Store key-value pairs	No direct visual effect	Hold related style values
Interpolation	.#{$name}	Insert variable into selector	Creates dynamic class names	Generate selectors from variables

Concept Snapshot

@each loop over maps lets you repeat CSS rules for each key-value pair. Use $map: (key: value, ...); to store pairs. Loop with @each $key, $value in $map { ... }. Use interpolation .#{$key} for dynamic class names. Generates multiple styled elements efficiently.