Generating utility classes with loops in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main benefit of using loops to generate utility classes in Sass?

Loops help create many similar CSS classes quickly and consistently, saving time and reducing errors.

beginner

Which Sass directive is used to create loops for generating classes?

The @for directive is used to run a loop a set number of times to generate classes.

beginner

Example: What does this Sass code do?

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

It creates three classes: .m-1, .m-2, and .m-3, each setting margin to 1rem, 2rem, and 3rem respectively.

intermediate

How can you use variables inside class names when generating utility classes with loops?

Use string interpolation with <code>#{} </code> to insert variables into class names or property values.

beginner

Why is generating utility classes with loops better than writing each class manually?

It reduces repetitive work, keeps code DRY (Don't Repeat Yourself), and makes it easy to update or add more classes later.

Which Sass directive is used to create a loop that runs from 1 to 5?

A @for $i from 1 through 5

B @each $i in 1 to 5

C @while $i < 5

D @loop $i from 1 to 5

The correct syntax for a loop running from 1 to 5 is @for $i from 1 through 5.

How do you insert a variable into a class name in Sass?

A .class-$i

B .class-{$i}

C .class-$[i]

D .class-#{$i}

Use string interpolation with #{$i} to insert the variable value inside class names.

What will this Sass code generate?
@for $i from 1 through 2 { .p-#{$i} { padding: #{$i}rem; } }

A Classes .p-1 and .p-2 with padding 1rem and 2rem

B Classes .p-1 and .p-2 with padding 1px and 2px

C Classes .p-1 and .p-2 with margin 1rem and 2rem

D No classes generated

The loop creates classes .p-1 and .p-2 with padding set to 1rem and 2rem respectively.

Why use loops to generate utility classes?

A To make code slower

B To write less code and avoid mistakes

C To confuse developers

D To increase file size

Loops help write less repetitive code and reduce errors by automating class creation.

Which of these is NOT a valid Sass loop directive?

A @while

B @each

C @repeat

D @for

@repeat is not a valid Sass directive; valid loops are @for, @each, and @while.

Explain how to generate margin utility classes from 1 to 5 rem using a Sass loop.

Think about looping from 1 through 5 and using #{} to insert the number in class names.

Describe the advantages of using loops to create utility classes in Sass compared to writing each class manually.

Consider how loops help with repetitive tasks and maintenance.

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