Lzh on GitHub

@while

@while 规则，其写法为 @while <expression> { ... }，如果其表达式返回 true，则评估其代码块。然后，如果其表达式仍然返回 true，它会再次评估其代码块。这个过程一直持续到表达式最终返回 false 为止。

@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);
}
尽管 @while 对于一些特别复杂的样式表是必需的，但如果 @each 或 @for 能够工作，你通常最好使用它们。它们对读者来说更清晰，并且编译速度通常也更快。

真值和假值

在任何允许 true 或 false 的地方，你也可以使用其他值。false 和 null 值是假值，这意味着 Sass 认为它们表示虚假并导致条件失败。所有其他值都被认为是真值，因此 Sass 认为它们的作用类似于 true 并导致条件成功。

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

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

@for

@for 规则，其写法为 @for <variable> from <expression> to <expression> { ... } 或 @for <variable> from <expression> through <expression> { ... }，它从一个数字（第一个表达式的结果）数到另一个数字（第二个表达式的结果），并为中间的每个数字评估一个代码块。沿途的每个数字都被分配给给定的变量名。如果使用 to，则不包括最后一个数字；如果使用 through，则包括它。

css @规则

Sass 支持所有作为 CSS 一部分的 at-rules。为了保持灵活性和对未来 CSS 版本的向前兼容性，Sass 默认提供了通用的支持，涵盖了几乎所有 at-rules。一个 CSS at-rule 的写法是 @<name> <value>、@<name> { ... } 或 @<name> <value> { ... }。name 必须是标识符，而 value（如果存在）可以是几乎任何东西。name 和 value 都可以包含插值。