@while loop usage in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @while loop in Sass?

The @while loop in Sass repeats a block of styles as long as a condition is true. It helps automate repetitive CSS tasks.

beginner

How do you write a basic @while loop in Sass?

You start with @while followed by a condition in parentheses, then curly braces with the styles inside. Example:<br>

$i: 1;<br>@while $i < 5 {<br>  .item-#{$i} {<br>    width: 10px * $i;<br>  }<br>  $i: $i + 1;<br>}

beginner

Why must you update the loop variable inside a @while loop in Sass?

If you don’t update the loop variable, the condition stays true forever, causing an infinite loop. You must increase or change the variable to eventually stop the loop.

beginner

What happens if the @while loop condition is false at the start?

The loop block does not run at all. Sass skips the styles inside the @while block because the condition is not met.

beginner

Give a real-life example where @while loop in Sass can be useful.

When you want to create multiple classes with incremental styles, like buttons with increasing padding or grid columns with different widths, @while helps write less code and keep it consistent.

What must you do inside a @while loop to avoid an infinite loop?

A Update the loop variable so the condition eventually becomes false

B Use <code>@break</code> outside the loop

C Write the loop without any condition

D Use <code>@if</code> inside the loop

You must update the loop variable inside the @while loop so the condition will eventually be false and stop the loop.

What does this Sass code do?<br>

$i: 1;<br>@while $i <= 3 {<br>  .box-#{$i} {<br>    width: 20px * $i;<br>  }<br>  $i: $i + 1;<br>}

A Creates three classes with widths 20px, 40px, and 60px

B Creates one class with width 20px

C Creates infinite classes

D Does nothing because $i is not updated

The loop runs while $i is 1, 2, and 3, creating .box-1, .box-2, and .box-3 with widths 20px, 40px, and 60px.

If the condition in @while is false at the start, what happens?

A The loop runs once

B The loop runs infinitely

C The loop block is skipped

D An error occurs

If the condition is false initially, the @while loop does not run at all.

Which of these is a common @while loop condition in Sass?

A $count == 10

B $count < 10

C $count > 10

D $count != 10

A @while loop runs while the condition is true. Conditions like $count < 10 are common to run loops until a limit.

What is the main benefit of using @while loops in Sass?

A To define variables

B To create animations

C To import other Sass files

D To write repetitive CSS automatically

@while loops help automate repetitive CSS code by generating multiple styles with less manual writing.

Explain how a @while loop works in Sass and why updating the loop variable is important.

Think about how a stop sign works in real life to end a repeated action.

Describe a practical example where you would use a @while loop in Sass to simplify your CSS.

Imagine making many buttons with different sizes or colors.