mirror of
https://github.com/danog/sass-site.git
synced 2024-12-05 21:39:02 +01:00
112 lines
4.4 KiB
Plaintext
112 lines
4.4 KiB
Plaintext
---
|
|
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 %}
|