等式運算子

相容性（無單位等式）
Dart Sass
✓
LibSass
✗
Ruby Sass
自 4.0.0 版本起（尚未發布）

LibSass 和舊版 Ruby Sass 認為沒有單位的數字與任何帶有單位的相同數字相等。由於這種行為違反了遞移關係，因此已被棄用，並且已從較新版本中移除。

等式運算子會傳回兩個值是否相同。它們的寫法是 <expression> == <expression>，傳回兩個表達式是否相等，以及 <expression> != <expression>，傳回兩個表達式是否*不*相等。如果兩個值的類型*和*值都相同，則它們被視為相等，這對於不同類型有不同的含義。

  • 如果數字的值*和*單位相同，或者它們的單位可以互相轉換且值相等，則它們相等。
  • 字串比較特殊，因為內容相同的無引號和帶引號的字串被視為相等。
  • 如果顏色處於相同的色彩空間並且具有相同的通道值，*或者*它們都處於舊版色彩空間並且具有相同的 RGBA 通道值，則它們相等。
  • 清單 (Lists) 若其內容相同則視為相等。逗號分隔的清單不等同於空格分隔的清單，且有括號的清單不等同於無括號的清單。
  • 映射 (Maps) 若其鍵值皆相同則視為相等。
  • 計算 (Calculations) 若其名稱和參數皆相同則視為相等。運算參數以文字方式進行比較。
  • true、false 和 null 只與自身相等。
  • 函式 (Functions) 與相同的函式相等。函式是*透過參照*來比較的，因此即使兩個函式具有相同的名稱和定義，如果它們不在同一個地方定義，則視為不同。
程式碼遊樂場 (Playground)

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
程式碼遊樂場 (Playground)

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