mirror of
https://github.com/danog/sass-site.git
synced 2024-12-14 02:17:36 +01:00
102 lines
3.9 KiB
Plaintext
102 lines
3.9 KiB
Plaintext
---
|
|
title: Equality Operators
|
|
---
|
|
|
|
<% impl_status dart: true, libsass: false, ruby: '4.0.0 (unreleased)' do %>
|
|
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
|
|
<% end %>
|
|
|
|
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]: ../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.
|
|
* [`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]: ../values/numbers
|
|
[Strings]: ../values/strings
|
|
[quoted]: ../values/strings#quoted
|
|
[unquoted]: ../values/strings#unquoted
|
|
[Colors]: ../values/colors
|
|
[Lists]: ../values/lists
|
|
[`true`, `false`]: ../values/booleans
|
|
[`null`]: ../values/null
|
|
[Maps]: ../values/maps
|
|
[Functions]: ../values/functions
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@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 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
|
|
<% end %>
|