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