@each loop over lists in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this @each loop?

Given the following Sass code, what CSS will it generate?

SASS

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

A

.text-red {
  color: red;
}
.text-green {
  color: blue;
}
.text-blue {
  color: green;
}

B

.text-red, .text-green, .text-blue {
  color: red, green, blue;
}

C

.text-red {
  color: red;
}
.text-green {
  color: green;
}
.text-blue {
  color: blue;
}

D

.text-#{$color} {
  color: $color;
}

💡 Hint

Remember that @each loops over each item and creates separate blocks.

The @each loop creates a CSS class for each color with the color property set accordingly. Option C shows the correct expanded CSS.

🧠 Conceptual

intermediate

How many CSS classes are generated by this @each loop?

Consider this Sass code: @each $size in small, medium, large, x-large { .btn-#{$size} { font-size: $size; } } How many CSS classes will be generated?

A 0

B 3

C 1

D 4

💡 Hint

Count the number of items in the list after @each.

The list has 4 items, so the loop creates 4 CSS classes, one for each size.

❓ selector

advanced

Which option produces the correct CSS selectors from this @each loop?

Given this Sass code: @each $icon in home, user, settings { .icon-#{$icon}::before { content: "\f#{$icon}"; } } Which CSS selectors are generated?

A .icon-home::before, .icon-user::before, .icon-settings::before

B .icon-home, .icon-user, .icon-settings

C .icon-#{$icon}::before

D .icon-home::after, .icon-user::after, .icon-settings::after

💡 Hint

Look carefully at the pseudo-element used and the interpolation.

The loop creates selectors with ::before pseudo-elements and interpolates the icon names correctly. Option A matches this.

❓ layout

advanced

What visual layout results from this Sass @each loop with Flexbox?

This Sass code generates CSS for colored boxes: $colors: red, green, blue; .container { display: flex; } @each $color in $colors { .box-#{$color} { background-color: $color; width: 5rem; height: 5rem; margin: 0.5rem; } } What will you see in the browser?

A One large square with a gradient from red to blue.

B Three colored squares (red, green, blue) arranged side by side horizontally with space between them.

C Three colored squares stacked vertically with no space.

D No visible boxes because width and height are missing.

💡 Hint

Flexbox arranges children in a row by default.

The container uses flex display, so the boxes appear side by side horizontally with margin spacing. Each box has a distinct background color and fixed size.

❓ accessibility

expert

Which option correctly uses @each loop to generate accessible button styles with ARIA roles?

You want to create buttons with different themes and ensure each button has an ARIA role for accessibility. Which Sass code correctly generates buttons with roles and styles?

A

@each $theme in primary, secondary, danger {
  .btn-#{$theme}[role="button"] {
    background-color: map-get($colors, $theme);
    cursor: pointer;
  }
}

B

@each $theme in primary, secondary, danger {
  .btn-#{$theme} {
    background-color: map-get($colors, $theme);
    &[role="button"] {
      cursor: pointer;
    }
  }
}

C

@each $theme in primary, secondary, danger {
  .btn-#{$theme} {
    background-color: map-get($colors, $theme);
    role: button;
  }
}

D

@each $theme in primary, secondary, danger {
  .btn-#{$theme} {
    background-color: map-get($colors, $theme);
    aria-role: button;
  }
}

💡 Hint

ARIA roles are HTML attributes, not CSS properties. Use attribute selectors in CSS.

Option A correctly uses attribute selector to style buttons with role="button" and applies background color and cursor style. Options A and D incorrectly try to set role or aria-role as CSS properties. Option A nests attribute selector inside class but does not apply styles correctly.

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