@each loop over maps in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @each loop in Sass when used with maps?

The @each loop in Sass lets you go through each key-value pair in a map, so you can use those values to create styles dynamically.

beginner

How do you access the key and value inside an @each loop over a Sass map?

You write @each $key, $value in $map. This sets $key to the map's key and $value to its value for each loop cycle.

intermediate

Example: What does this Sass code do?<br>

@each $color, $hex in $colors {
  .text-#{$color} {
    color: $hex;
  }
}

It creates CSS classes like .text-red or .text-blue with the text color set to the corresponding hex value from the $colors map.

intermediate

Can you use @each to loop over just the keys or just the values of a Sass map?

Yes! You can loop over just keys by using map-keys($map) or just values with map-values($map) inside the @each loop.

beginner

Why is using @each loop over maps helpful in real web design?

It helps keep your styles organized and easy to update. For example, changing a color in one place updates all related styles automatically.

What does @each $key, $value in $map do in Sass?

A Converts the map to a list

B Loops through each key-value pair in the map

C Deletes all keys in the map

D Creates a new map

The @each loop goes through each key and value in the map one by one.

How do you write a loop to get only the keys from a Sass map?

A @each $key in map-keys($map)

B @each $key in map-values($map)

C @each $value in $map

D @each $key, $value in $map

Using map-keys($map) returns only the keys, which you can loop over.

What will this Sass code generate?<br>

$colors: (red: #f00, blue: #00f);
@each $name, $hex in $colors {
  .bg-#{$name} {
    background-color: $hex;
  }
}

A An error because maps can't be looped

B CSS classes .red and .blue with text colors

C Nothing, it's invalid syntax

D CSS classes .bg-red and .bg-blue with background colors

It creates classes with background colors from the map keys and values.

Which Sass function returns all values from a map?

A map-values()

B map-keys()

C map-get()

D map-remove()

map-values() returns a list of all values in the map.

Why is looping over maps with @each useful?

A It slows down the CSS rendering

B It deletes unused styles automatically

C It helps create repetitive styles easily and keeps code DRY

D It converts CSS to JavaScript

Looping helps write less code and update styles in one place.

Explain how to use the @each loop to create CSS classes from a Sass map of colors.

Think about how to turn map keys into class names and values into style values.

Describe the difference between looping over a map directly and looping over map-keys or map-values in Sass.

Consider what you want to access inside the loop.