@while

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

SCSS Syntax

@use "sass:math";

/// Делит `$value` на `$ratio` , пока оно не станет меньше `$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 Syntax

@use "sass:math"

/// Делит `$value` на `$ratio` , пока оно не станет меньше `$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 Output

sup {
  font-size: 12.36094px;
}

⚠️ Внимание!

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

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

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

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

⚠️ Внимание!

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