Generating utility classes with loops in SASS

Introduction

Loops help you create many similar CSS classes quickly. This saves time and keeps your code neat.

When you want to make many spacing classes like margin or padding with different sizes.

When you need color classes for different shades of a color.

When you want to create size classes for fonts or widths in steps.

When you want to avoid writing repetitive CSS by hand.

Syntax

SASS

@for $i from <start> through <end> {
  .class-#{$i} {
    property: value * $i;
  }
}

The @for directive runs a loop from a start number to an end number.

Use #{$i} to insert the loop number into class names or values.

Examples

This creates margin classes .m-1, .m-2, and .m-3 with increasing margin sizes.

SASS

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

This makes font size classes from .text-size-1 to .text-size-5 with growing font sizes.

SASS

@for $i from 1 through 5 {
  .text-size-#{$i} {
    font-size: 1rem + 0.2rem * $i;
  }
}

Sample Program

This code creates padding classes .p-1 to .p-4 with increasing padding sizes from 0.25rem to 1rem. It also creates background color classes .bg-light-1 to .bg-light-3 with increasing blue transparency.

Use these classes in HTML to see boxes with different padding and background shades.

SASS

@use 'sass:math';

@for $i from 1 through 4 {
  .p-#{$i} {
    padding: math.div(1 * $i, 4) * 1rem;
  }
}

@for $i from 1 through 3 {
  .bg-light-#{$i} {
    background-color: rgba(0, 0, 255, 0.2 * $i);
  }
}

/* HTML example to test classes */

/*
<div class="p-1 bg-light-1">Box 1</div>
<div class="p-2 bg-light-2">Box 2</div>
<div class="p-3 bg-light-3">Box 3</div>
<div class="p-4">Box 4</div>
*/

Important Notes

Loops in Sass help avoid writing repetitive CSS code.

Use @for for counting loops, @each for lists, and @while for conditions.

Remember to compile Sass to CSS before using it in the browser.

Summary

Loops let you create many CSS classes quickly and cleanly.

Use @for with #{$variable} to insert numbers in class names.

This saves time and keeps your styles consistent.

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