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?<br>

@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?<br>@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.