@each loop over lists in SASS - Browser Rendering Trace

Render Flow - @each loop over lists

Read SASS file

↓

Parse @each loop

↓

Iterate over list items

↓

Generate CSS for each item

↓

Output compiled CSS

↓

Browser reads CSS

↓

Apply styles to HTML elements

↓

Render visual changes

The SASS compiler reads the @each loop, repeats the CSS rules for each list item, outputs CSS, which the browser applies to HTML elements to show styled results.

Render Steps - 3 Steps

Code Added:HTML: <ul> with 3 <li> items

Before

[Empty page]

→

After

[ul]
 ├─ [li] Red
 ├─ [li] Green
 └─ [li] Blue

The HTML creates a list with three items visible as text on the page.

🔧 Browser Action:Parse HTML and build DOM tree

Code Sample

Each list item in the unordered list is colored red, green, or blue using the @each loop over the $colors list.

SASS

<ul class="colors">
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

SASS

$colors: red, green, blue;

@each $color in $colors {
  .colors li:nth-child(#{index($colors, $color)}) {
    color: $color;
  }
}

Render Quiz - 3 Questions

After applying the @each loop in step 3, what happens to the list items?

A Each list item gets a different text color from the $colors list

B All list items get the same color

C No color changes happen

D List items become hidden

Common Confusions - 2 Topics

Why don't all list items get the same color when using @each?

Because @each loops over each color and applies it to a specific list item using nth-child, so each item gets a different color.

💡 Each loop iteration targets one element, not all at once.

Why does the color not apply if I forget interpolation in nth-child?

Without interpolation (#{ }), the selector is invalid CSS and won't match elements, so no color is applied.

💡 Use #{ } to insert dynamic values inside selectors.

Property Reference

SASS Feature	Syntax	Purpose	Visual Effect	Common Use
@each loop	@each $item in $list { ... }	Repeat styles for each list item	Multiple CSS rules generated	Styling repeated elements with variations
List variable	$colors: red, green, blue;	Store multiple values	No direct visual effect	Use in loops or functions
Interpolation	nth-child(#{index($list, $item)})	Calculate dynamic selectors	Targets specific elements	Apply styles based on position

Concept Snapshot

@each loop repeats styles for each item in a list. Use $list variables to store multiple values. Interpolation #{ } inserts dynamic values in selectors. Generates multiple CSS rules for repeated styling. Common for coloring or styling repeated elements differently.