@while

@while 规则,写为 @while <expression> {…} ,如果其表达式返回 true ,则对其块求值。然后,如果其表达式仍返回 true ,则再次计算其块。直到表达式最终返回 false 为止。

scss 语句 css 语句
@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);
}
sup {
  font-size: 12.36094px;
}
⚠️注意!
尽管 @while 对于一些特别复杂的样式表是必需的,但您通常最好使用其中任何一个, @each 或者 @for 如果它们中的任何一个都可以工作。它们对读者来说更清楚,而且通常编译起来也更快。


真与假

任何允许 true false 的地方,都可以使用其他值。值 false null 为假,这意味着 Sass 认为它们表示错误并导致条件失败。所有其他价值观都被认为是真实的,因此 Sass 认为它们像真实的一样工作,并创造成功的条件。

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

⚠️注意!
一些语言认为更多的值是虚假的,而不仅仅是 false null 。Sass 不是其中一种语言! 空字符串 空列表 和数字 0 ,在 Sass 中都是真值。

上篇: @for