@while

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

Playground

SCSS Syntax

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

Sass Syntax

@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 Output

sup {
  font-size: 12.3609394314px;
}

⚠️ Heads up!

虽然 @while 对于一些特别复杂的样式表是必需的，但如果其中任何一个都可以工作，通常最好使用 @each 或 @for。它们对读者来说更清晰，而且编译起来通常也更快。

¥Although @while is necessary for a few particularly complex stylesheets, you’re usually better of using either @each or @for if either of them will work. They’re clearer for the reader, and often faster to compile as well.

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.