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

Recall & Review

beginner

What does the @each loop do in Sass?

It repeats a block of styles for each item in a list or map, helping you write less code and keep styles consistent.

beginner

How do you write an @each loop to go through a list of colors named $colors?

You write: <br>

@each $color in $colors {<br>  /* styles using $color */<br>}

intermediate

Can @each loop handle multiple variables at once?

Yes! If the list contains sublists, you can unpack them like: <br>

@each $name, $value in $list {<br>  /* use $name and $value */<br>}

beginner

Why use @each loop instead of writing styles manually?

It saves time, reduces mistakes, and makes your code easier to update because you change the list once and all styles update automatically.

intermediate

What happens if you use @each with an empty list?

The loop does nothing and no styles are generated, so it’s safe to use even if the list might be empty.

What keyword starts a loop over a list in Sass?

A @for

B @while

C @each

D @loop

The @each keyword is used to loop over lists or maps in Sass.

How do you access each item in the list inside an @each loop?

A Using a function call

B Using an index number

C Using a map key

D Using a variable declared after <code>in</code>

You declare a variable after in to represent each item as the loop runs.

Which of these is a valid @each loop syntax for a list $sizes?

A @each $size in $sizes { ... }

B @each $sizes in $size { ... }

C @each $size from $sizes { ... }

D @each $sizes from $size { ... }

The correct syntax is @each $variable in $list { ... }.

If a list contains pairs like (name, value), how do you loop over them?

A @each $name, $value in $list { ... }

B @each $pair in $list { ... }

C @each $name in $value { ... }

D @each $value, $name in $list { ... }

You can unpack pairs by listing multiple variables separated by commas.

What happens if the list used in @each is empty?

A An error occurs

B No styles are generated

C The loop runs once with no value

D The compiler crashes

The loop simply does nothing and no styles are output.

Explain how to use the @each loop in Sass to style multiple elements with different colors.

Think about how you would paint different walls with different colors using a list.

Describe the benefits of using @each loops over writing repetitive CSS manually.

Imagine changing many similar things at once by changing just one list.