Operators - Equality

source/documentation/operators/equality.liquid

@@ -0,0 +1,108 @@
+---
+title: Equality Operators
+---
+{% compatibility 'dart: true', 'libsass: false', 'ruby: "4.0.0 (unreleased)"', 'feature: "Unitless Equality"'%}
+  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][].
+
+  [transitivity]: https://en.wikipedia.org/wiki/Transitive_relation
+{% endcompatibility %}
+
+{% markdown %}
+  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:
+
+  [expressions]: /documentation/syntax/structure#expressions
+
+  - [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.
+  - [Colors][] are equal if they have the same red, green, blue, and alpha 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.
+  - [`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.
+
+  [Numbers]: /documentation/values/numbers
+  [Strings]: /documentation/values/strings
+  [quoted]: /documentation/values/strings#quoted
+  [unquoted]: /documentation/values/strings#unquoted
+  [Colors]: /documentation/values/colors
+  [Lists]: /documentation/values/lists
+  [`true`, `false`]: /documentation/values/booleans
+  [`null`]: /documentation/values/null
+  [Maps]: /documentation/values/maps
+  [Calculations]: /documentation/values/calculations
+  [Functions]: /documentation/values/functions
+{% endmarkdown %}
+
+{% codeExample 'equality', false %}
+  @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
+  ===
+  @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
+{% endcodeExample %}