@each loop over lists in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @each loop do in Sass?

It repeats a block of styles for each item in a list or map, helping you write less code and keep styles consistent.

beginner

How do you write an @each loop to go through a list of colors named $colors?

You write:

@each $color in $colors {
  /* styles using $color */
}

intermediate

Can @each loop handle multiple variables at once?

Yes! If the list contains sublists, you can unpack them like:

@each $name, $value in $list {
  /* use $name and $value */
}

beginner

Why use @each loop instead of writing styles manually?

It saves time, reduces mistakes, and makes your code easier to update because you change the list once and all styles update automatically.

intermediate

What happens if you use @each with an empty list?

The loop does nothing and no styles are generated, so it’s safe to use even if the list might be empty.

What keyword starts a loop over a list in Sass?

A @for

B @while

C @each

D @loop

The @each keyword is used to loop over lists or maps in Sass.

How do you access each item in the list inside an @each loop?

A Using a function call

B Using an index number

C Using a map key

D Using a variable declared after <code>in</code>

You declare a variable after in to represent each item as the loop runs.

Which of these is a valid @each loop syntax for a list $sizes?

A @each $size in $sizes { ... }

B @each $sizes in $size { ... }

C @each $size from $sizes { ... }

D @each $sizes from $size { ... }

The correct syntax is @each $variable in $list { ... }.

If a list contains pairs like (name, value), how do you loop over them?

A @each $name, $value in $list { ... }

B @each $pair in $list { ... }

C @each $name in $value { ... }

D @each $value, $name in $list { ... }

You can unpack pairs by listing multiple variables separated by commas.

What happens if the list used in @each is empty?

A An error occurs

B No styles are generated

C The loop runs once with no value

D The compiler crashes

The loop simply does nothing and no styles are output.

Explain how to use the @each loop in Sass to style multiple elements with different colors.

Think about how you would paint different walls with different colors using a list.

Describe the benefits of using @each loops over writing repetitive CSS manually.

Imagine changing many similar things at once by changing just one list.

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