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

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass code using @each over a map?

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

$colors: (primary: #333, secondary: #666); @each $name, $color in $colors { .#{$name} { color: $color; } }

SASS

$colors: (primary: #333, secondary: #666);
@each $name, $color in $colors {
  .#{$name} {
    color: $color;
  }
}

A

.primary { color: #666; }
.secondary { color: #333; }

B

.primary { color: #333; }
.secondary { color: #666; }

C

.primary { color: #666; }
.secondary { color: #666; }

D

.primary { color: #333; }
.secondary { color: #333; }

💡 Hint

Remember that @each loops over each key-value pair in the map.

The @each loop iterates over the map $colors, assigning $name to the key and $color to the value. It creates CSS classes with the key as the class name and sets the color property to the value.

❓ rendering

intermediate

What color will the .alert-warning class have after this Sass code compiles?

Consider this Sass code:

$alerts: (success: green, warning: yellow, error: red);
@each $type, $color in $alerts {
  .alert-#{$type} {
    background-color: $color;
  }
}

What background color will the .alert-warning class have in the compiled CSS?

SASS

$alerts: (success: green, warning: yellow, error: red);
@each $type, $color in $alerts {
  .alert-#{$type} {
    background-color: $color;
  }
}

A red

B blue

C yellow

D green

💡 Hint

Look at the key 'warning' in the map and its value.

The .alert-warning class gets the background-color from the 'warning' key in the $alerts map, which is yellow.

❓ selector

advanced

Which option correctly selects keys and values from a Sass map in an @each loop?

You want to loop over a Sass map $themes: (dark: #000, light: #fff); and create classes for each theme. Which @each syntax correctly assigns the key to $theme and the value to $color?

SASS

$themes: (dark: #000, light: #fff);

A @each $theme, $color in $themes { .#{$theme} { background: $color; } }

B @each $theme in $themes { .#{$theme} { background: map-get($themes, $theme); } }

C @each $color, $theme in $themes { .#{$theme} { background: $color; } }

D @each $color in $themes { .#{$color} { background: $color; } }

💡 Hint

Remember the order is key, then value in @each loops over maps.

In Sass, when looping over a map with @each, the first variable gets the key and the second gets the value. Option A correctly assigns $theme to the key and $color to the value.

❓ layout

advanced

What is the visual result of this Sass code using @each over a map for button colors?

Given this Sass code:

$btn-colors: (primary: blue, danger: red);
@each $name, $color in $btn-colors {
  .btn-#{$name} {
    background-color: $color;
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
  }
}

What will you see in the browser when you use <button class="btn-primary">Primary</button> and <button class="btn-danger">Danger</button>?

SASS

$btn-colors: (primary: blue, danger: red);
@each $name, $color in $btn-colors {
  .btn-#{$name} {
    background-color: $color;
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
  }
}

A Two buttons: one blue background with white text labeled 'Primary', one red background with white text labeled 'Danger', both with rounded corners and padding.

B Two buttons: both with white background and black text, no padding or rounding.

C Two buttons: one red background with black text labeled 'Primary', one blue background with black text labeled 'Danger'.

D No buttons styled; default browser button styles appear.

💡 Hint

Look at the background-color and color properties inside the loop.

The @each loop creates two classes with background colors blue and red, white text, padding, and rounded corners. Buttons with these classes will show these styles.

❓ accessibility

expert

How can you use @each over a map in Sass to generate accessible focus styles for multiple button types?

You have a map of button types and their focus outline colors:

$focus-colors: (primary: #005fcc, danger: #cc0000, success: #008000);

Which Sass code snippet correctly uses @each to generate focus styles with outline and outline-offset for accessibility?

SASS

$focus-colors: (primary: #005fcc, danger: #cc0000, success: #008000);

A

@each $type in $focus-colors {
  .btn-#{$type}:focus {
    outline: 3px solid map-get($focus-colors, $type);
    outline-offset: 2px;
  }
}

B

@each $color in $focus-colors {
  .btn-#{$color}:focus {
    outline: 3px solid $color;
    outline-offset: 2px;
  }
}

C

@each $color, $type in $focus-colors {
  .btn-#{$type}:focus {
    outline: 3px solid $color;
    outline-offset: 2px;
  }
}

D

@each $type, $color in $focus-colors {
  .btn-#{$type}:focus {
    outline: 3px solid $color;
    outline-offset: 2px;
  }
}

💡 Hint

Remember the order of variables in @each when looping over maps.

Option D correctly assigns $type to the key and $color to the value, then uses them to create focus styles with accessible outlines for each button type.

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