@each loop over maps in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to loop over the map keys and values.

SASS

@each $key, $value in [1] {
  .#{$key} {
    color: $value;
  }
}

Drag options to blanks, or click blank then click option'

A$items

B$list

C$colors

D$map

Attempts:

3 left

💡 Hint

Common Mistakes

Using a list variable instead of a map.

Forgetting the $ sign before the variable name.

The variable $colors is the map we want to loop over using @each to get keys and values.

2fill in blank

medium

Complete the code to access the map inside the loop.

SASS

@each $name, $shade in [1] {
  .#{$name} {
    background-color: $shade;
  }
}

Drag options to blanks, or click blank then click option'

A$colors

B$themes

C$shades

D$palette

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable that is not a map.

Confusing variable names.

The map variable $colors contains the color names and their values to loop over.

3fill in blank

hard

Fix the error in the @each loop to correctly iterate over the map.

SASS

@each $color, $value [1] $palette {
  .#{$color} {
    border-color: $value;
  }
}

Drag options to blanks, or click blank then click option'

Ain

Bon

Cfrom

Dof

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'of' or 'from' instead of 'in'.

Omitting the keyword entirely.

The correct keyword to loop over a map in Sass is 'in'.

4fill in blank

hard

Fill both blanks to create a map and loop over it with @each.

SASS

$themes: ([1]: #333, [2]: #eee);
@each $name, $color in $themes {
  .#{$name} {
    background: $color;
  }
}

Drag options to blanks, or click blank then click option'

Adark

Blight

Cprimary

Dsecondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid map keys.

Mixing up keys and values.

The map keys 'dark' and 'light' are used to define theme colors and looped over with @each.

5fill in blank

hard

Fill all three blanks to create a map and loop over it to set font sizes.

SASS

$font-sizes: ([1]: 1rem, [2]: 1.5rem, [3]: 2rem);
@each $size-name, $size-value in $font-sizes {
  .font-#{$size-name} {
    font-size: $size-value;
  }
}

Drag options to blanks, or click blank then click option'

Asmall

Bmedium

Clarge

Dxlarge

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys that do not match the class names.

Incorrect order of keys.

The map keys 'small', 'medium', and 'large' are used to define font sizes and looped over with @each.