@each loop over maps in SASS - Performance & Optimization

Performance: @each loop over maps

MEDIUM IMPACT

This affects CSS generation time and the final CSS file size, impacting page load speed and render time.

Generating CSS classes from a map of colors

SASS

$colors: (red: #f00, green: #0f0, blue: #00f);
@each $name, $hex in $colors {
  .text-#{$name} {
    color: $hex;
  }
  .bg-#{$name} {
    background-color: $hex;
  }
}

Single @each loop over map reduces iterations and generates concise CSS.

📈 Performance GainSingle iteration; smaller CSS file; faster compilation.

Generating CSS classes from a map of colors

SASS

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

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

Repeating @each loops separately for related styles causes duplicated iteration and larger CSS output.

📉 Performance CostIncreases CSS file size and compilation time; triggers multiple passes over the same data.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Separate @each loops over lists	N/A (build time)	N/A	Larger CSS size delays style application	[X] Bad
Single @each loop over map	N/A (build time)	N/A	Smaller CSS size loads faster	[OK] Good

Rendering Pipeline

Sass @each loops run at build time, generating CSS before the browser loads the page. Efficient loops produce smaller CSS files, reducing network load and improving initial render.

→Network Load

→Style Calculation

→Layout

⚠️ BottleneckNetwork Load due to CSS file size

Core Web Vital Affected

LCP

This affects CSS generation time and the final CSS file size, impacting page load speed and render time.

Optimization Tips

1Use a single @each loop over maps to generate related CSS rules together.

2Avoid repeating @each loops over the same data to reduce CSS size.

3Check CSS file size in DevTools Network panel to ensure efficient output.

Performance Quiz - 3 Questions

What is a performance benefit of using a single @each loop over a map in Sass?

A Increases DOM nodes created by the browser

B Triggers more reflows during page load

C Reduces CSS file size by avoiding repeated loops

D Blocks JavaScript execution on the page

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, and check file size.

What to look for: Smaller CSS file size indicates efficient @each loops; large CSS files suggest duplication.

Practice

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

easy

A. It creates a new map from the keys only.

B. It deletes all map entries after looping.

C. It repeats styles for each key-value pair in the map.

D. It converts the map into a list.

Solution

1. Step 1: Understand the purpose of @each with maps

   The @each loop iterates over each key-value pair in a map.

2. Step 2: Identify what happens during iteration

   For each pair, it repeats the block of styles or code inside the loop.

3. Final Answer:

   It repeats styles for each key-value pair in the map. -> Option C

4. Quick Check:

   @each loops over map pairs = repeats styles [OK]

Hint: Remember: @each repeats code for each map pair [OK]

Common Mistakes:

• Thinking @each deletes map entries
• Confusing map keys with list items
• Assuming it converts maps to lists

2. Which of the following is the correct syntax to loop over a map $colors with @each in Sass?

easy

A. @each $key $value in $colors { ... }

B. @each $colors in $key, $value { ... }

C. @each $value, $key in $colors { ... }

D. @each $key, $value in $colors { ... }

Solution

1. Step 1: Recall the correct @each syntax for maps

   The syntax requires two variables separated by a comma, then in, then the map name.

2. Step 2: Match the syntax to the options

   @each $key, $value in $colors { ... } correctly uses @each $key, $value in $colors. Others have wrong order or missing comma.

3. Final Answer:

   @each $key, $value in $colors { ... } -> Option D

4. Quick Check:

   Two variables separated by comma + in + map name [OK]

Hint: Use comma between key and value, then 'in' before map [OK]

Common Mistakes:

• Swapping key and value order
• Missing comma between variables
• Using wrong variable order or syntax

3. Given the Sass map and code:

$themes: (light: #fff, dark: #000); @each $name, $color in $themes { .#{$name}-theme { background: $color; } }

What CSS will this generate?

medium

A. .light-theme { background: #fff; } .dark-theme { background: #000; }

B. .light { background: #fff; } .dark { background: #000; }

C. .theme-light { background: #fff; } .theme-dark { background: #000; }

D. .light-theme { background: light; } .dark-theme { background: dark; }

Solution

1. Step 1: Understand the map and loop variables

   The map has keys light and dark with colors #fff and #000.

2. Step 2: Analyze the generated CSS selectors and properties

   The selector uses interpolation .#{$name}-theme producing .light-theme and .dark-theme. The background uses the color value.

3. Final Answer:

   .light-theme { background: #fff; } .dark-theme { background: #000; } -> Option A

4. Quick Check:

   Interpolation creates .light-theme and .dark-theme with correct colors [OK]

Hint: Interpolation with #{} creates dynamic class names [OK]

Common Mistakes:

• Forgetting interpolation syntax
• Using keys as colors instead of values
• Mixing up class name order

4. Identify the error in this Sass code:

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

medium

A. Missing comma between key and value in @each loop.

B. Using only one variable for a map instead of two.

C. Incorrect interpolation syntax in class name.

D. Map keys and values are reversed.

Solution

1. Step 1: Check the @each loop variables

   The map has key-value pairs, so the loop needs two variables separated by a comma.

2. Step 2: Identify the problem with one variable

   The code uses only $size instead of $key, $value, so it cannot access both parts of the map.

3. Final Answer:

   Using only one variable for a map instead of two. -> Option B

4. Quick Check:

   Maps need two variables in @each loops [OK]

Hint: Use two variables for maps in @each loops [OK]

Common Mistakes:

• Using one variable for map iteration
• Forgetting comma between variables
• Misusing interpolation syntax

5. You have a Sass map:

$shadows: (none: 0 0 0 transparent, light: 0 1px 3px rgba(0,0,0,0.12), heavy: 0 4px 6px rgba(0,0,0,0.3));

Write a @each loop that creates classes .shadow-none, .shadow-light, and .shadow-heavy with the correct box-shadow property. Which code snippet is correct?

hard

A. @each $name, $shadow in $shadows { .shadow-#{$name} { box-shadow: $shadow; } }

B. @each $shadow, $name in $shadows { .shadow-#{$name} { box-shadow: $shadow; } }

C. @each $name in $shadows { .shadow-#{$name} { box-shadow: $name; } }

D. @each $name, $shadow in $shadows { .shadow-#{$shadow} { box-shadow: $name; } }

Solution

1. Step 1: Identify correct variable order for map iteration

   Maps use @each $key, $value in $map, so $name is key and $shadow is value.

2. Step 2: Check class name and property usage

   The class uses interpolation with the key $name, and the property uses the value $shadow.

3. Final Answer:

   @each $name, $shadow in $shadows { .shadow-#{$name} { box-shadow: $shadow; } } -> Option A

4. Quick Check:

   Key first, value second, use interpolation for class [OK]

Hint: Map loops: key first, value second, interpolate key for class [OK]

Common Mistakes:

• Swapping key and value variables
• Using only one variable for map
• Interpolating value instead of key in class name