@while

@whileルールは、@while <式> { ... }と記述し、その式が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はそのような言語の1つではありません！空の文字列、空のリスト、および数値0はすべてSassでは真です。