相等运算符

Compatibility (Unitless Equality):
Dart Sass
✓
LibSass
✗
Ruby Sass
since 4.0.0 (unreleased)

LibSass 和旧版本的 Ruby Sass 认为没有单位的数字等于具有任何单位的相同数字。这种行为已被弃用并从最近的版本中移除，因为它违反了传递性。

相等运算符返回两个值是否相同。它们的写法是 <表达式> == <表达式>，返回两个表达式是否相等，以及 <表达式> != <表达式>，返回两个表达式是否不相等。如果两个值是相同的类型且相同的值，则认为它们相等，对于不同的类型，这意味着不同的事情：

  • 数字如果它们具有相同的值和相同的单位，或者当它们的单位相互转换时值相等，则相等。
  • 字符串比较特殊，不带引号和带引号的内容相同的字符串被认为相等。
  • 颜色如果它们在同一个颜色空间中且具有相同的通道值，或者如果它们都在传统颜色空间中且具有相同的 RGBA 通道值，则相等。
  • 列表如果它们的内容相等，则相等。逗号分隔的列表不等于空格分隔的列表，带括号的列表不等于不带括号的列表。
  • 映射如果它们的键和值都相等，则相等。
  • 计算如果它们的名称和参数都相等。操作参数是文本比较。
  • true、false和 null 仅等于它们自身。
  • 函数等于相同的函数。函数是按引用比较的，所以即使两个函数具有相同的名称和定义，如果它们不是在同一个地方定义，也被认为是不同的。
Playground

SCSS Syntax

@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
Playground

Sass Syntax

@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