@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:

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

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?

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

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.

Practice

1. What does the @while loop do in Sass?

easy

A. Stops styles from being applied

B. Runs styles only once

C. Creates a list of styles without repeating

D. Repeats styles while a condition is true

Solution

1. Step 1: Understand the purpose of @while loop

   The @while loop repeats code as long as a condition remains true.

2. Step 2: Compare options with the loop behavior

   Only Repeats styles while a condition is true correctly describes repeating styles while a condition is true.

3. Final Answer:

   Repeats styles while a condition is true -> Option D

4. Quick Check:

   @while loops repeat while true [OK]

Hint: Remember: @while repeats until condition is false [OK]

Common Mistakes:

• Thinking it runs only once
• Confusing with static style blocks
• Believing it stops styles immediately

2. Which of the following is the correct syntax for a @while loop in Sass?

easy

A. @while $i < 5 { .box-#{$i} { width: 10px * $i; } }

B. @while ($i < 5) .box-#{$i} { width: 10px * $i; }

C. @while $i < 5: .box-#{$i} { width: 10px * $i; }

D. @while $i <= 5; { .box-#{$i} { width: 10px * $i; } }

Solution

1. Step 1: Check the correct @while syntax

   The correct syntax uses @while condition { ... } without parentheses or semicolons.

2. Step 2: Identify the option matching this syntax

   @while $i < 5 { .box-#{$i} { width: 10px * $i; } } uses @while $i < 5 { ... } which is correct Sass syntax.

3. Final Answer:

   @while $i < 5 { .box-#{$i} { width: 10px * $i; } } -> Option A

4. Quick Check:

   Correct @while syntax uses braces, no parentheses [OK]

Hint: Use braces {} after @while, no parentheses needed [OK]

Common Mistakes:

• Adding parentheses around condition
• Using semicolons after condition
• Missing braces for loop body

3. What will be the output CSS of this Sass code?

$i: 1;
@while $i <= 3 {
  .item-#{$i} {
    width: 10px * $i;
  }
  $i: $i + 1;
}

medium

A. Syntax error due to missing semicolon

B. .item-1 { width: 1; } .item-2 { width: 2; } .item-3 { width: 3; }

C. .item-1 { width: 10px; } .item-2 { width: 20px; } .item-3 { width: 30px; }

D. No output because $i is not incremented

Solution

1. Step 1: Understand the loop iterations

   The loop runs while $i is 1, 2, and 3, incrementing $i each time.

2. Step 2: Calculate the width for each iteration

   Widths are 10px * 1 = 10px, 10px * 2 = 20px, 10px * 3 = 30px, generating three classes.

3. Final Answer:

   .item-1 { width: 10px; } .item-2 { width: 20px; } .item-3 { width: 30px; } -> Option C

4. Quick Check:

   Loop runs 3 times, width multiplies by $i [OK]

Hint: Check loop count and multiply values carefully [OK]

Common Mistakes:

• Forgetting to increment $i
• Confusing units in multiplication
• Assuming syntax error without checking

4. Identify the error in this Sass @while loop:

$i: 1;
@while $i < 4 {
  .box-#{$i} {
    height: 20px * $i;
  }
}

medium

A. Missing increment of $i inside the loop

B. Incorrect loop condition syntax

C. Using multiplication without units

D. Missing braces around loop body

Solution

1. Step 1: Check loop variable update

   The variable $i is never increased inside the loop, causing an infinite loop.

2. Step 2: Confirm other syntax parts

   Loop condition and braces are correct; multiplication with units is valid in Sass.

3. Final Answer:

   Missing increment of $i inside the loop -> Option A

4. Quick Check:

   Loop variable must change to stop loop [OK]

Hint: Always update loop variable inside @while [OK]

Common Mistakes:

• Forgetting to increment loop variable
• Assuming syntax error instead of logic error
• Confusing multiplication units

5. You want to create 4 button styles with increasing padding using @while. Which code correctly achieves this?

$count: 1;
@while $count <= 4 {
  .btn-#{$count} {
    padding: 5px * $count;
  }
  $count: $count + 1;
}

hard

A. Creates only one button style because $count is not incremented

B. Correctly creates .btn-1 to .btn-4 with padding 5px, 10px, 15px, 20px

C. Syntax error due to missing parentheses in condition

D. Creates buttons but padding stays constant at 5px

Solution

1. Step 1: Analyze loop condition and increment

   The loop runs while $count is 1 to 4, incrementing $count each time.

2. Step 2: Check padding calculation and class names

   Each button gets padding 5px times $count, producing 5px, 10px, 15px, and 20px for .btn-1 to .btn-4.

3. Final Answer:

   Correctly creates .btn-1 to .btn-4 with padding 5px, 10px, 15px, 20px -> Option B

4. Quick Check:

   Loop with increment and multiplication works as expected [OK]

Hint: Increment loop variable and multiply padding inside loop [OK]

Common Mistakes:

• Not incrementing loop variable
• Using parentheses incorrectly in Sass @while
• Forgetting to multiply padding by loop variable