等価演算子

互換性（単位なしの等価性）
Dart Sass
✓
LibSass
✗
Ruby Sass
4.0.0以降（未リリース）

LibSassと古いバージョンのRuby Sassは、単位のない数値を、任意の単位を持つ同じ数値と等しいとみなします。この動作は非推奨となり、推移性に違反するため、より最近のリリースから削除されました。

等価演算子は、2つの値が同じかどうかを返します。これらは<expression> == <expression>と記述され、2つの式が等しいかどうかを返し、<expression> != <expression>は、2つの式が等しくないかどうかを返します。2つの値は、型が同じかつ値が同じ場合に等しいとみなされます。これは、型によって意味が異なります。

  • 数値は、値が同じかつ単位が同じ場合、または単位を相互に変換したときに値が等しい場合に等しくなります。
  • 文字列は、引用符なしと引用符付きの文字列が同じ内容である場合、等しいとみなされるという点で珍しいです。
  • 色は、同じ色空間にあり、同じチャンネル値を持つ場合、または両方がレガシー色空間にあり、同じRGBAチャンネル値を持つ場合に等しくなります。
  • リストは、内容が等しい場合に等しくなります。カンマ区切りリストはスペース区切りリストと等しくなく、ブラケット付きリストはブラケットなしリストと等しくありません。
  • マップは、キーと値の両方が等しい場合に等しくなります。
  • 計算は、名前と引数がすべて等しい場合に等しくなります。演算引数はテキストとして比較されます。
  • true、false、およびnullは、それ自体にのみ等しくなります。
  • 関数は、同じ関数と等しくなります。関数は参照によって比較されるため、たとえ2つの関数が同じ名前と定義を持っていても、同じ場所で定義されていない場合は異なるものとみなされます。
プレイグラウンド

SCSS構文

@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug 1 != 1px; // true
@debug 96px == 1in; // true

@debug "Helvetica" == Helvetica; // true
@debug "Helvetica" != "Arial"; // true

@debug hsl(34, 35%, 92.1%) == #f2ece4; // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

@debug (5px 7px 10px) == (5px 7px 10px); // true
@debug (5px 7px 10px) != (10px 14px 20px); // true
@debug (5px 7px 10px) != (5px, 7px, 10px); // true
@debug (5px 7px 10px) != [5px 7px 10px]; // true

$theme: ("venus": #998099, "nebula": #d2e1dd);
@debug $theme == ("venus": #998099, "nebula": #d2e1dd); // true
@debug $theme != ("venus": #998099, "iron": #dadbdf); // true

@debug true == true; // true
@debug true != false; // true
@debug null != false; // true

@debug get-function("rgba") == get-function("rgba"); // true
@debug get-function("rgba") != get-function("hsla"); // true
プレイグラウンド

Sass構文

@debug 1px == 1px  // true
@debug 1px != 1em  // true
@debug 1 != 1px  // true
@debug 96px == 1in  // true

@debug "Helvetica" == Helvetica  // true
@debug "Helvetica" != "Arial"  // true

@debug hsl(34, 35%, 92.1%) == #f2ece4  // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8)  // true

@debug (5px 7px 10px) == (5px 7px 10px)  // true
@debug (5px 7px 10px) != (10px 14px 20px)  // true
@debug (5px 7px 10px) != (5px, 7px, 10px)  // true
@debug (5px 7px 10px) != [5px 7px 10px]  // true

$theme: ("venus": #998099, "nebula": #d2e1dd)
@debug $theme == ("venus": #998099, "nebula": #d2e1dd)  // true
@debug $theme != ("venus": #998099, "iron": #dadbdf)  // true

@debug calc(10px + 10%) == calc(10px + 10%)  // true
@debug calc(10% + 10px) == calc(10px + 10%)  // false

@debug true == true  // true
@debug true != false  // true
@debug null != false  // true

@debug get-function("rgba") == get-function("rgba")  // true
@debug get-function("rgba") != get-function("hsla")  // true