@while

Правило @while, написанное @while <expression> { ... }, оценивает свой блок, если его выражение возвращает true. Затем, если его выражение всё ещё возвращает true, оно повторно оценивает свой блок. Это продолжается до тех пор, пока выражение, наконец, не вернёт false.

@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);
}
// SASS
@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)
/* CSS */
sup {
  font-size: 12.3609394314px;
}

Хотя @while необходимо для некоторых особенно сложных таблиц стилей, вам обычно лучше использовать либо @each, либо @for, если они подходят. Они более понятны для читателя и часто компилируются быстрее.

Истинность и ложность

В любом месте, где true или false разрешены, вы также можете использовать другие значения. Значения false и null являются ложными, что означает, что Sass считает их указанием на ложность и приводит к провалу условий. Все остальные значения считаются истинными, поэтому Sass рассматривает их как работающие подобно true и приводит к выполнению условий.

Например, если вы хотите проверить, содержит ли строка пробел, вы можете просто написать string.index($string, " "). Функция string.index() возвращает null, если строка не найдена, и число в противном случае.

Некоторые языки считают ложными больше значений, чем просто false и null. Sass не относится к таким языкам! Пустые строки, пустые списки и число 0 являются истинными в Sass.

© 2006–2025 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/at-rules/control/while