Sass @while Rule

What You’ll Learn

Sass @while repeats a block as long as a condition stays true. This page covers how the loop works, when to prefer @for / @each, safe variable updates, truthiness, and five compiled examples.

What Is @while?

Official docs: the @while rule evaluates its block if the expression returns true. Then, if the expression still returns true, it evaluates the block again. This continues until the expression finally returns false.

Write it as @while <condition> { … }. Inside the block you almost always update one or more variables that the condition depends on—otherwise the loop never ends.

• Compile-time only—browsers never see @while.
• Best for open-ended or complex stop conditions (not simple 1…n counts).
• Common inside @function helpers that shrink or grow a value.
• Only false and null are falsey in Sass.

⚠️ Prefer @for or @each When You Can

Official docs warn: although @while is necessary for a few particularly complex stylesheets, you are usually better off using either @each or @for if either will work. They are clearer for readers and often faster to compile.

📝 Syntax

$i: 1;

@while $i <= 3 {
  .step-#{$i} {
    order: $i;
  }
  $i: $i + 1; // required — otherwise the loop never stops
}

✅ Truthiness and Falsiness

Official docs: anywhere true or false are allowed, you can use other values. Only false and null are falsey. Every other value is truthy—including 0, empty strings, and empty lists.

Examples Gallery

Each example updates loop state so the condition can become false. Open View Compiled CSS for verified output.

@use "sass:math";

/// Divides `$value` by `$ratio` until it's below `$base`.
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

$normal-font-size: 16px;

sup {
  font-size: scale-below(20px, 16px);
}

sup {
  font-size: 12.3609394314px;
}

$i: 1;

@while $i <= 4 {
  .step-#{$i} {
    order: $i;
  }
  $i: $i + 1;
}

.step-1 {
  order: 1;
}

.step-2 {
  order: 2;
}

.step-3 {
  order: 3;
}

.step-4 {
  order: 4;
}

@use "sass:list";

@function powers-of-two($start, $limit) {
  $n: $start;
  $out: ();

  @while $n <= $limit {
    $out: list.append($out, $n);
    $n: $n * 2;
  }

  @return $out;
}

$sizes: powers-of-two(4px, 32px);

@each $size in $sizes {
  .gap-#{$size} {
    gap: $size;
  }
}

.gap-4px {
  gap: 4px;
}

.gap-8px {
  gap: 8px;
}

.gap-16px {
  gap: 16px;
}

.gap-32px {
  gap: 32px;
}

@use "sass:math";

$size: 64px;
$base: 8px;
$i: 0;

@while $size > $base {
  .box-#{$i} {
    width: $size;
    height: $size;
  }
  $size: math.div($size, 2);
  $i: $i + 1;
}

.box-0 {
  width: 64px;
  height: 64px;
}

.box-1 {
  width: 32px;
  height: 32px;
}

.box-2 {
  width: 16px;
  height: 16px;
}

@use "sass:string";
@use "sass:meta";

@function strip-leading-zeros($str) {
  @while string.index($str, "0") == 1 and string.length($str) > 1 {
    $str: string.slice($str, 2);
  }
  @return $str;
}

.result {
  --a: #{meta.inspect(strip-leading-zeros("00042"))};
  --b: #{meta.inspect(strip-leading-zeros("0"))};
  --c: #{meta.inspect(strip-leading-zeros("1050"))};
}

.result {
  --a: "42";
  --b: "0";
  --c: "1050";
}

🚀 Real-World Use Cases

• Scale helpers — shrink font or spacing until under a base.
• Generated sequences — powers of two, Fibonacci-style steps.
• String cleanup — strip prefixes while a pattern still matches.
• Complex stop rules — more than one condition must change.
• Function internals — keep looping logic out of selectors.

⚠️ Common Pitfalls

• Infinite loops — forgetting to update the condition’s variables hangs the compiler.
• Using @while for fixed ranges — prefer @for.
• Treating 0 as falsey — in Sass, 0 is truthy; only false and null fail.
• Huge CSS output — a loose condition can emit thousands of rules.
• Mutating shared state unexpectedly — keep loop variables local inside functions when possible.

💡 Best Practices