The Sass @while Loop

How the @while Loop Works

@while checks a condition before every iteration and keeps running its block until that condition becomes false. Unlike @for, which has a built-in, bounded range, @while requires you to manage the loop's exit condition yourself, which makes it easy to accidentally write an infinite loop.

$i: 1;

@while $i <= 3 {
  .stack-#{$i} {
    z-index: $i * 10;
  }
  $i: $i + 1;
}

Notice the manual $i: $i + 1; increment, if this line were forgotten, the loop would never terminate and the compiler would hang.

@while Syntax

$i: start-value;

@while condition {
  // block
  $i: $i + step;
}

• @while requires a variable initialized before the loop and updated inside it.
• The condition is re-checked before every iteration, including the first.
• There is no built-in protection against infinite loops, you are fully responsible for the exit condition.
• Almost every @while loop can be rewritten as an equivalent, safer @for loop.

@while Loop Cheatsheet

When (rarely) to use @while, and how it compares to @for.

A Practical @while Example

A reasonable use case for @while is when the stopping condition depends on a computed value rather than a simple counter, for example, halving a value repeatedly until it drops below a threshold.

$size: 64px;

@while $size > 8px {
  .icon-#{$size} {
    width: $size;
    height: $size;
  }
  $size: math.div($size, 2);
}

Generates icon sizes 64px, 32px, and 16px, before stopping once the size drops to 8px or below.

Avoiding Infinite Loops

Because @while has no built-in bound, forgetting to update the loop's controlling variable causes the Sass compiler to hang indefinitely. Always double-check that every code path inside a @while block moves the condition closer to becoming false.

• Always update the loop variable inside the loop body, never conditionally skip it.
• Prefer a @for loop whenever the number of iterations is actually knowable ahead of time.
• If a compile hangs unexpectedly, a runaway @while loop is one of the first things to check.

@while vs @for, Revisited

In practice, most Sass style guides recommend avoiding @while entirely unless there is a genuine dynamic stopping condition that can't be expressed as a simple numeric range, which is rare in day-to-day stylesheet work.

Common Mistakes

• Forgetting to update the loop's controlling variable, causing an infinite loop that hangs the Sass compiler.
• Using @while for a simple, fixed-count loop that @for would express more safely and clearly.
• Writing a condition that can never become false due to a logic error, easy to miss without careful testing.
• Not setting an initial value for the loop variable before the @while statement.

Key Takeaways

• @while repeats a block until a manually managed condition becomes false.
• It carries a real risk of infinite loops if the controlling variable isn't updated correctly.
• @for and @each safely cover the vast majority of real-world Sass looping needs.
• Reserve @while for the rare case where the stopping condition is genuinely dynamic and can't be expressed as a fixed range.