`@while`

`@while` 規則，寫作 `@while <expression> { ... }`，如果它的表達式回傳 `true` 就會執行其程式碼區塊。然後，如果它的表達式仍然回傳 `true`，它會再次執行其程式碼區塊。這將持續到表達式最終回傳 `false` 為止。

程式碼 playground

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);
}
程式碼 playground

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 中都是真值。