@each loop over lists in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to loop over the list and print each color.

SASS

@each $color in [1] {
  color: $color;
}

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

Acolor-list

B$colors

Ccolors

D$color-list

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the $ before the list variable.

Using a variable name that does not exist.

The @each loop requires a list variable with a $ prefix. Here, $colors is the correct list variable.

2fill in blank

medium

Complete the code to loop over the list $sizes and set font-size.

SASS

@each $size in [1] {
  font-size: $size;
}

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

A$sizes

Bsizes

C$size

D$fontsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using the loop variable instead of the list variable in the loop.

Omitting the $ in the list variable.

The list variable is $sizes. The loop variable is $size, but the list to loop over must be $sizes.

3fill in blank

hard

Fix the error in the loop to correctly iterate over $fonts.

SASS

@each $font in [1] {
  font-family: $font;
}

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

Afonts

B$font

C$fonts

Dfont

Attempts:

3 left

💡 Hint

Common Mistakes

Using the singular form instead of the plural list variable.

Omitting the $ in the list variable.

The list variable must have the $ prefix and match the list name $fonts. Using fonts without $ causes an error.

4fill in blank

hard

Fill both blanks to loop over $shapes and set border-radius.

SASS

@each [1] in [2] {
  border-radius: $shape;
}

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

A$shape

Bshapes

C$shapes

D$radius

Attempts:

3 left

💡 Hint

Common Mistakes

Using the list variable without $.

Using the wrong variable names.

The loop variable is $shape and the list variable is $shapes. Both need the $ prefix.

5fill in blank

hard

Fill all three blanks to loop over $borders and set border styles.

SASS

@each [1] in [2] {
  border-style: [3];
}

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

A$border

B$borders

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using the list variable without $.

Omitting the $ when using the loop variable inside the property value.

The loop variable is $border, the list variable is $borders, and the property value uses the loop variable $border.