@while

@while 规则，写作 @while <表达式> { ... }，如果其表达式返回 true，则求值其代码块。然后，如果其表达式仍然返回 true，则再次求值其代码块。这将持续进行，直到表达式最终返回 false。

Playground

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);
}
Playground

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.3609394314px;
}

⚠️ Heads up!

尽管 @while 对于一些特别复杂的样式表是必要的，但通常最好使用 @each 或 @for（如果它们能够满足需求）。它们对读者来说更加清晰，并且编译速度通常也更快。

Truthiness and FalsinessTruthiness and Falsiness permalink

Anywhere true or false are allowed, you can use other values as well. The values false and null are falsey, which means Sass considers them to indicate falsehood and cause conditions to fail. Every other value is considered truthy, so Sass considers them to work like true and cause conditions to succeed.

For example, if you want to check if a string contains a space, you can just write string.index($string, " "). The string.index() function returns null if the string isn’t found and a number otherwise.

⚠️ Heads up!

Some languages consider more values falsey than just false and null. Sass isn’t one of those languages! Empty strings, empty lists, and the number 0 are all truthy in Sass.