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

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

⚠️ 注意！

一些语言认为比 false 和 null 更多的值是假值。Sass 不是这些语言之一！空字符串、空列表和数字 0 在 Sass 中都是真值。