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.

Practice

1. What is the main benefit of using @for loops in Sass when generating utility classes?

easy

A. It automatically adds JavaScript functionality to classes.

B. It creates many classes quickly and keeps styles consistent.

C. It reduces the file size by removing unused CSS.

D. It changes the HTML structure dynamically.

Solution

1. Step 1: Understand the purpose of @for loops in Sass

   The @for loop is used to repeat CSS code multiple times with slight variations, such as different class names.

2. Step 2: Identify the benefit in utility class generation

   Using loops lets you create many utility classes quickly and ensures consistent naming and styling without writing repetitive code.

3. Final Answer:

   It creates many classes quickly and keeps styles consistent. -> Option B

4. Quick Check:

   Loops speed up class creation = B [OK]

Hint: Loops generate many classes fast and consistent [OK]

Common Mistakes:

• Thinking loops add JavaScript behavior
• Believing loops reduce CSS file size automatically
• Confusing loops with HTML structure changes

2. Which of the following is the correct syntax to create utility classes .m-1 to .m-5 using a Sass @for loop?

easy

A. @for $i from 1 through 5 { .m-#{$i} { margin: $i * 1rem; } }

B. @for $i in 1 to 5 { .m-#{$i} { margin: $i * 1rem; } }

C. @for $i = 1; $i <= 5; $i++ { .m-#{$i} { margin: $i * 1rem; } }

D. @loop $i from 1 to 5 { .m-#{$i} { margin: $i * 1rem; } }

Solution

1. Step 1: Recall Sass @for loop syntax

   The correct syntax uses @for $var from start through end or to for exclusive end.

2. Step 2: Identify the correct loop and interpolation

   @for $i from 1 through 5 { .m-#{$i} { margin: $i * 1rem; } } uses from 1 through 5 and interpolates #{$i} correctly in the class name.

3. Final Answer:

   @for $i from 1 through 5 { .m-#{$i} { margin: $i * 1rem; } } -> Option A

4. Quick Check:

   Correct Sass loop syntax = D [OK]

Hint: Use '@for $i from 1 through 5' with #{$i} interpolation [OK]

Common Mistakes:

• Using JavaScript-style loops in Sass
• Wrong keywords like 'in' or 'loop'
• Missing interpolation syntax #{}

3. What CSS classes will be generated by this Sass code?

@for $i from 1 through 3 {
  .p-#{$i} {
    padding: $i * 0.5rem;
  }
}

medium

A. .p-1 { padding: 0.05rem; } .p-2 { padding: 0.1rem; } .p-3 { padding: 0.15rem; }

B. .p-1 { padding: 1rem; } .p-2 { padding: 2rem; } .p-3 { padding: 3rem; }

C. .p-1 { padding: 0.5rem; } .p-2 { padding: 1rem; } .p-3 { padding: 1.5rem; }

D. .p-1 { padding: 0.5px; } .p-2 { padding: 1px; } .p-3 { padding: 1.5px; }

Solution

1. Step 1: Understand the loop range and multiplication

   The loop runs from 1 to 3. Each padding value is $i * 0.5rem.

2. Step 2: Calculate padding for each class

   For i=1, padding = 0.5rem; for i=2, padding = 1rem; for i=3, padding = 1.5rem.

3. Final Answer:

   .p-1 { padding: 0.5rem; } .p-2 { padding: 1rem; } .p-3 { padding: 1.5rem; } -> Option C

4. Quick Check:

   Multiply i by 0.5rem = C [OK]

Hint: Multiply loop index by 0.5rem for padding values [OK]

Common Mistakes:

• Confusing rem with px units
• Multiplying by wrong factor
• Misreading loop range

4. Identify the error in this Sass code that tries to generate width classes .w-1 to .w-4:

@for $i from 1 to 4 {
  .w-#{$i} {
    width: $i * 10px;
  }
}

medium

A. Using 'to' instead of 'through' excludes the last number.

B. Missing interpolation #{} in class name.

C. Multiplying number by px unit directly causes error.

D. Loop variable $i should start from 0.

Solution

1. Step 1: Check the loop range keyword

   The keyword 'to' excludes the last number, so loop runs 1 to 3, not 4.

2. Step 2: Confirm other syntax parts

   Interpolation is correct, and multiplying number by px unit is valid in Sass.

3. Final Answer:

   Using 'to' instead of 'through' excludes the last number. -> Option A

4. Quick Check:

   'to' excludes end number = A [OK]

Hint: Use 'through' to include last number in @for loops [OK]

Common Mistakes:

• Confusing 'to' and 'through' keywords
• Thinking multiplication by px is invalid
• Starting loop at 0 when not needed

5. You want to generate margin utility classes .m-0 to .m-5 but skip .m-3. Which Sass code correctly does this?

hard

A. @for $i from 0 through 5 {
.m-#{$i} {
margin: $i * 0.25rem;
}
}

B. @for $i from 0 through 5 {
@if $i == 3 {
.m-#{$i} {
margin: $i * 0.25rem;
}
}
}

C. @for $i from 0 through 5 {
.m-#{$i} {
margin: $i * 0.25rem;
}
@if $i == 3 {
@continue;
}
}

D. @for $i from 0 through 5 {
@if $i != 3 {
.m-#{$i} {
margin: $i * 0.25rem;
}
}
}

Solution

1. Step 1: Understand the goal to skip .m-3

   We want classes from 0 to 5 but not for 3.

2. Step 2: Check conditional logic in options

   @for $i from 0 through 5 { @if $i != 3 { .m-#{$i} { margin: $i * 0.25rem; } } } uses @if $i != 3 to skip generating .m-3. @for $i from 0 through 5 { @if $i == 3 { .m-#{$i} { margin: $i * 0.25rem; } } } generates only .m-3. @for $i from 0 through 5 { .m-#{$i} { margin: $i * 0.25rem; } @if $i == 3 { @continue; } } tries to use @continue after class creation, which is invalid in Sass. @for $i from 0 through 5 { .m-#{$i} { margin: $i * 0.25rem; } } generates all classes including .m-3.

3. Final Answer:

   @for $i from 0 through 5 { @if $i != 3 { .m-#{$i} { margin: $i * 0.25rem; } } } -> Option D

4. Quick Check:

   Use @if $i != 3 to skip class = A [OK]

Hint: Use @if to exclude unwanted loop values [OK]

Common Mistakes:

• Using @continue incorrectly in Sass
• Generating unwanted classes by missing condition
• Using wrong condition to include only one value