source/documentation/at-rules/control/while.md
{% 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;
}
@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) {% 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.
{% endheadsUp %}
{% render 'doc_snippets/truthiness-and-falsiness' %}