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

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