@while

@while 规则，写为 @while <expression> { ... }，如果其 表达式 返回 true，则会计算其块。然后，如果其表达式仍然返回 true，则会再次计算其块。这会一直持续到表达式最终返回 false。

SCSS 语法

@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 是 falsey，这意味着 Sass 将它们视为表示假值，并导致条件失败。任何其他值都被视为 truthy，因此 Sass 将它们视为像 true 一样工作并导致条件 成功。

例如，如果你想检查一个字符串是否包含空格，你可以直接编写 string.index($string, " ")。如果未找到字符串，string.index() 函数 将返回 null，否则返回一个数字 。

⚠️ 注意！

一些语言认为除了 false 和 null 之外，还有更多值是 falsey。Sass 不是其中之一！在 Sass 中，空字符串、空列表和数字 0 都是 truthy。