@each loop over lists in SASS

Introduction

The @each loop helps you repeat styles for each item in a list. It saves time and keeps your code neat.

You want to apply different colors to multiple buttons.

You have a list of font sizes and want to create classes for each size.

You want to create margin or padding classes for a set of spacing values.

You want to style a list of navigation links with different backgrounds.

You want to generate multiple similar styles without writing them one by one.

Syntax

SASS

@each $item in $list {
  // styles using $item
}

The $item is a variable that holds each value from the list one by one.

The $list is the list of values you want to loop over.

Examples

This creates three classes: .text-red, .text-green, and .text-blue, each with the matching text color.

SASS

$colors: red, green, blue;

@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

This creates margin classes for each size in the list.

SASS

$sizes: 1rem, 2rem, 3rem;

@each $size in $sizes {
  .margin-#{$size} {
    margin: $size;
  }
}

If the list is empty, the loop does nothing and no styles are created.

SASS

$empty-list: (); 

@each $item in $empty-list {
  .class-#{$item} {
    color: $item;
  }
}

// No output because the list is empty.

Even if the list has only one item, the loop runs once and creates one class.

SASS

$single-item: purple;

@each $color in $single-item {
  .text-#{$color} {
    color: $color;
  }
}

Sample Program

This code creates three button styles with different background colors from the list. The text color is a lighter shade of the background for good contrast. Each button has padding, rounded corners, and some margin.

SASS

@use "sass:color";

$button-colors: #ff0000, #00ff00, #0000ff;

@each $button-color in $button-colors {
  .btn-#{$button-color} {
    background-color: $button-color;
    color: color.scale($button-color, $lightness: 80%);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: bold;
    display: inline-block;
    margin: 0.5rem;
  }
}

Important Notes

The @each loop runs once for every item in the list.

It is faster and cleaner than writing repetitive CSS for each item.

Remember to use interpolation #{$variable} when using variables inside class names or selectors.

Summary

@each loops over each item in a list to create repeated styles.

Use it to save time and avoid writing the same code many times.

Works well with colors, sizes, or any list of values.

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