Generating utility classes with loops in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a loop from 1 to 5 in Sass.

SASS

@for $i from 1 [1] 5 {
  .m-#{$i} {
    margin: #{$i}rem;
  }
}

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

Auntil

Bto

Cthrough

Ddown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to' which excludes the last number.

Using 'until' which is not a Sass keyword.

Using 'down' which is not valid for ascending loops.

In Sass, @for $i from 1 through 5 loops from 1 up to and including 5.

2fill in blank

medium

Complete the code to generate padding utility classes from 1 to 4 rem.

SASS

@for $n from 1 to 5 {
  .p-[1] {
    padding: #{$n}rem;
  }
}

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

A$i

B$n

C$x

D$p

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name not declared in the loop.

Using a variable that is not defined anywhere.

The loop variable is $n, so use it to name the classes.

3fill in blank

hard

Fix the error in the loop to generate width utilities from 10% to 50%.

SASS

@for $i from 1 [1] 5 {
  .w-#{$i}0 {
    width: #{$i * 10}%; 
  }
}

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

Ato

Bdown

Cuntil

Dthrough

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to' which excludes the last number.

Using 'down' which is not a valid keyword.

Use through to include the last number in the loop.

4fill in blank

hard

Fill in the blank to create margin utilities with negative values from -1rem to -3rem.

SASS

@for $i from 1 [1] 4 {
  .m-n#{$i} {
    margin: -#{$i}rem;
  }
}

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

Ato

Bdown

Cuntil

Dthrough

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'through' which includes the last number (would generate -4rem).

Using 'until' which is not Sass syntax.

Using 'down' which is not valid here.

Use to to loop from 1 to 3 (excluding 4).

5fill in blank

hard

Fill all three blanks to generate font-size utilities from 12px to 20px.

SASS

@for $i from [1] [2] [3] {
  .fs-#{$i} {
    font-size: #{$i}px;
  }
}

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

A12

Bto

C20

Dthrough

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to' which excludes the last number.

Wrong start or end values.

The loop starts at 12, goes through 20, including 20.