演算子

Sassは、さまざまな値を操作するためのいくつかの便利な演算子をサポートしています。これらには、+*のような標準的な数学演算子や、他のさまざまな 型のための演算子が含まれています。

  • ==!= は、2つの値が同じかどうかをチェックするために使用されます。
  • +-*/、および% は、数値に対して通常の数学的な意味を持ち、科学的な数学での単位の使用に一致する単位の特殊な動作をします。
  • <<=>、および>= は、2つの数値が互いに大きいか小さいかをチェックします。
  • andor、およびnot は、通常のブール動作をします。Sassは、falsenullを除くすべての値を「true」と見なします。
  • +-、および/ は、文字列を連結するために使用できます。

⚠️ 注意!

Sassの歴史の初期には、に対する数学演算のサポートが追加されました。これらの演算は、色のRGBチャネルのそれぞれを個別に操作するため、2つの色を追加すると、それらの赤チャネルの合計を赤チャネルとする色が生成されます。

この動作は、チャネルごとのRGB算術が人間が色を認識する方法にあまり対応していなかったため、あまり役に立ちませんでした。色関数が追加され、はるかに便利になり、色の操作は非推奨になりました。LibSassとRuby Sassではまだサポートされていますが、警告が表示され、ユーザーはそれらを避けることを強く推奨されています。

演算の優先順位演算の優先順位 permalink

Sassには、最も優先順位が高いものから低いものまで、かなり標準的な演算の優先順位があります。

  1. 単項演算子not+-、および/
  2. */、および%演算子
  3. +および-演算子
  4. >>=<および<=演算子
  5. ==および!=演算子
  6. and演算子
  7. or演算子
  8. =演算子(利用可能な場合)。
プレイグラウンド

SCSS構文

@debug 1 + 2 * 3 == 1 + (2 * 3); // true
@debug true or false and false == true or (false and false); // true
プレイグラウンド

Sass構文

@debug 1 + 2 * 3 == 1 + (2 * 3)  // true
@debug true or false and false == true or (false and false)  // true

括弧括弧 permalink

括弧を使用して演算の順序を明示的に制御できます。括弧内の演算は、常に括弧外の演算よりも先に評価されます。括弧はネストすることもでき、その場合は、最も内側の括弧が最初に評価されます。

プレイグラウンド

SCSS構文

@debug (1 + 2) * 3; // 9
@debug ((1 + 2) * 3 + 4) * 5; // 65
プレイグラウンド

Sass構文

@debug (1 + 2) * 3  // 9
@debug ((1 + 2) * 3 + 4) * 5  // 65

単一等号単一等号 permalink

Sassは、関数引数でのみ許可されている特別な=演算子をサポートしており、これは2つのオペランドを=で区切ったクォートされていない文字列を作成します。これは、非常に古いIE専用の 構文との下位互換性のために存在します。

プレイグラウンド

SCSS構文

.transparent-blue {
  filter: chroma(color=#0000ff);
}
プレイグラウンド

Sass構文

.transparent-blue
  filter: chroma(color=#0000ff)

CSS出力

.transparent-blue {
  filter: chroma(color=#0000ff);
}