sass-site/source/documentation/at-rules/control/while.liquid

---
title: "@while"
introduction: >
  The `@while` rule, written `@while <expression> { ... }`, evaluates its block
  if its [expression](/documentation/syntax/structure#expressions) returns
  `true`. Then, if its expression still returns `true`, it evaluates its block
  again. This continues until the expression finally returns `false`.
---

{% codeExample 'while' %}
  @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);
  }
  ===
  @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.36094px;
  }
{% endcodeExample %}

{% headsUp %}
  Although `@while` is necessary for a few particularly complex stylesheets,
  you're usually better of using either [`@each`][] or [`@for`][] if either of
  them will work. They're clearer for the reader, and often faster to compile as
  well.

  [`@each`]: /documentation/at-rules/control/each
  [`@for`]: /documentation/at-rules/control/for
{% endheadsUp %}

{% render 'documentation/snippets/truthiness-and-falsiness' %}