@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.

Practice

1. What does the @each loop do in Sass when used with a list?

easy

A. It repeats a block of styles for each item in the list.

B. It creates a new list from the original list.

C. It deletes items from the list one by one.

D. It converts the list into a map automatically.

Solution

1. Step 1: Understand the purpose of @each

   The @each loop is designed to run a block of code for every item in a list.

2. Step 2: Identify what happens with each item

   For each item, it repeats the styles or code inside the loop, creating multiple style blocks.

3. Final Answer:

   It repeats a block of styles for each item in the list. -> Option A

4. Quick Check:

   @each loops = repeat styles [OK]

Hint: Remember: @each repeats code for every list item [OK]

Common Mistakes:

• Thinking @each modifies the list itself
• Confusing @each with list functions like map
• Assuming it deletes or filters items

2. Which of the following is the correct syntax to loop over a list (red, green, blue) using @each in Sass?

easy

A. @each $color in (red, green, blue) { color: $color; }

B. @each color in red, green, blue { color: color; }

C. @each $color from (red, green, blue) { color: $color; }

D. @each $color on (red, green, blue) { color: $color; }

Solution

1. Step 1: Identify correct @each syntax

   The correct syntax uses @each $variable in (list) to loop over items.

2. Step 2: Check each option

   @each $color in (red, green, blue) { color: $color; } uses @each $color in (red, green, blue) which is correct. Options A, B, and D use wrong keywords or miss the $ sign.

3. Final Answer:

   @each $color in (red, green, blue) { color: $color; } -> Option A

4. Quick Check:

   Use @each $var in (list) syntax [OK]

Hint: Use 'in' keyword and $variable for each item [OK]

Common Mistakes:

• Omitting the $ before the variable
• Using wrong keywords like 'from' or 'on'
• Not wrapping list in parentheses

3. What will be the output CSS of this Sass code?

@each $size in (small, medium, large) {
  .btn-#{$size} {
    font-size: if($size == small, 1rem, if($size == medium, 1.5rem, 2rem));
  }
}

medium

A. Syntax error due to nested if statements

B. .btn-small { font-size: 2rem; }
.btn-medium { font-size: 1rem; }
.btn-large { font-size: 1.5rem; }

C. .btn-small { font-size: 1rem; }
.btn-medium { font-size: 1.5rem; }
.btn-large { font-size: 2rem; }

D. .btn-small { font-size: 1.5rem; }
.btn-medium { font-size: 2rem; }
.btn-large { font-size: 1rem; }

Solution

1. Step 1: Understand the loop and interpolation

   The loop runs over sizes: small, medium, large. The class name uses interpolation to create .btn-small, .btn-medium, .btn-large.

2. Step 2: Evaluate the font-size condition

   Using nested if: small -> 1rem, medium -> 1.5rem, large -> 2rem.

3. Final Answer:

   .btn-small { font-size: 1rem; } .btn-medium { font-size: 1.5rem; } .btn-large { font-size: 2rem; } -> Option C

4. Quick Check:

   Loop + interpolation + if = correct CSS [OK]

Hint: Match each list item to its style using interpolation [OK]

Common Mistakes:

• Mixing up font-size values
• Thinking nested if causes syntax error
• Ignoring interpolation in class names

4. Identify the error in this Sass code using @each loop:

@each $color (red, green, blue) {
  .text-#{$color} {
    color: $color;
  }
}

medium

A. Variable $color should not have a $ sign.

B. Interpolation syntax #{$color} is incorrect.

C. Parentheses around the list are not allowed.

D. Missing 'in' keyword after $color in the loop.

Solution

1. Step 1: Check the @each loop syntax

   The correct syntax requires the keyword in between the variable and the list.

2. Step 2: Identify the missing keyword

   The code misses in after $color, causing a syntax error.

3. Final Answer:

   Missing 'in' keyword after $color in the loop. -> Option D

4. Quick Check:

   @each $var in (list) needs 'in' [OK]

Hint: Always write '@each $var in (list)' with 'in' keyword [OK]

Common Mistakes:

• Forgetting the 'in' keyword
• Removing $ from variable names
• Misusing interpolation syntax

5. Given the list (10px, 20px, 0, 30px), how can you use @each to create margin classes but skip the zero value?

hard

A. @each $m in (10px, 20px, 0, 30px) { .m-#{$m} { margin: $m; } }

B. @each $m in (10px, 20px, 0, 30px) { @if $m != 0 { .m-#{$m} { margin: $m; } } }

C. @each $m in (10px, 20px, 0, 30px) { @if $m == 0 { .m-#{$m} { margin: $m; } } }

D. @each $m in (10px, 20px, 0, 30px) { @if $m > 30px { .m-#{$m} { margin: $m; } } }

Solution

1. Step 1: Loop over all margin values

   The @each loop goes through each value including zero.

2. Step 2: Use @if to skip zero

   Inside the loop, add @if $m != 0 to only create classes for non-zero margins.

3. Final Answer:

   @each $m in (10px, 20px, 0, 30px) { @if $m != 0 { .m-#{$m} { margin: $m; } } } -> Option B

4. Quick Check:

   Use @if inside @each to filter items [OK]

Hint: Use @if inside @each to skip unwanted values [OK]

Common Mistakes:

• Not filtering zero, so unwanted class is created
• Using wrong condition like == 0 instead of != 0
• Trying to filter outside the loop