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