等式运算符

兼容性 (Unitless Equality):
Dart Sass
LibSass
Ruby Sass
since 4.0.0 (unreleased)

LibSass 和旧版本的 Ruby Sass 认为没有单位的数字等于带有任何单位的相同数字。此行为已被弃用,并已从最近的版本中删除,因为它违反了 及物性

¥LibSass and older versions of Ruby Sass consider numbers without units to be equal to the same numbers with any units. This behavior was deprecated and has been removed from more recently releases because it violates transitivity.

相等运算符返回两个值是否相同。它们被写为 <expression> == <expression>,它返回两个 表达式 是否相等,而 <expression> != <expression>,它返回两个表达式是否不相等。如果两个值具有相同的类型和相同的值,则它们被视为相等,这对于不同的类型意味着不同的事情:

¥The equality operators return whether or not two values are the same. They’re written <expression> == <expression>, which returns whether two expressions are equal, and <expression> != <expression>, which returns whether two expressions are not equal. Two values are considered equal if they’re the same type and the same value, which means different things for different types:

  • 如果 数字 具有相同的值和相同的单位,或者它们的单位相互转换后的值相等,则 数字 相等。

    ¥Numbers are equal if they have the same value and the same units, or if their values are equal when their units are converted between one another.

  • 字符串 是不寻常的,因为具有相同内容的 未引用的 字符串被认为是相等的。

    ¥Strings are unusual in that unquoted and quoted strings with the same contents are considered equal.

  • 如果 颜色 在同一个 颜色空间 中且具有相同的通道值,或者它们都在 旧颜色空间 中且具有相同的 RGBA 通道值,则它们相等。

    ¥Colors are equal if they’re in the same color space and have the same channel values, or if they’re both in legacy color spaces and have the same RGBA channel values.

  • 如果它们的内容相等,则 列表 相等。逗号分隔列表不等于空格分隔列表,括号列表不等于不括号列表。

    ¥Lists are equal if their contents are equal. Comma-separated lists aren’t equal to space-separated lists, and bracketed lists aren’t equal to unbracketed lists.

  • 如果它们的键和值都相等,则 映射 相等。

    ¥Maps are equal if their keys and values are both equal.

  • 如果它们的名称和参数都相等,则 计算 相等。操作参数按文本进行比较。

    ¥Calculations are equal if their names and arguments are all equal. Operation arguments are compared textually.

  • truefalsenull 仅等于它们自己。

    ¥true, false, and null are only equal to themselves.

  • 函数 等于相同的函数。函数是通过引用进行比较的,因此即使两个函数具有相同的名称和定义,如果它们没有在同一位置定义,它们也会被视为不同。

    ¥Functions are equal to the same function. Functions are compared by reference, so even if two functions have the same name and definition they’re considered different if they aren’t defined in the same place.

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