mirror of
https://github.com/danog/sass-site.git
synced 2024-12-05 21:39:02 +01:00
102 lines
3.5 KiB
Plaintext
102 lines
3.5 KiB
Plaintext
---
|
|
title: Operators
|
|
introduction: >
|
|
Sass supports a handful of useful `operators` for working with different
|
|
values. These include the standard mathematical operators like `+` and `*`, as
|
|
well as operators for various other types:
|
|
---
|
|
|
|
{% markdown %}
|
|
{% render 'doc_snippets/operator-list', parens: false %}
|
|
{% endmarkdown %}
|
|
|
|
{% headsUp %}
|
|
Early on in Sass's history, it added support for mathematical operations on
|
|
[colors][]. These operations operated on each of the colors' RGB channels
|
|
separately, so adding two colors would produce a color with the sum of their
|
|
red channels as its red channel and so on.
|
|
|
|
[colors]: /documentation/values/colors
|
|
|
|
This behavior wasn't very useful, since it channel-by-channel RGB arithmetic
|
|
didn't correspond well to how humans perceive color. [Color functions][] were
|
|
added which are much more useful, and color operations were deprecated.
|
|
They're still supported in LibSass and Ruby Sass, but they'll produce warnings
|
|
and users are strongly encouraged to avoid them.
|
|
|
|
[Color functions]: /documentation/modules/color
|
|
{% endheadsUp %}
|
|
|
|
{% markdown %}
|
|
## Order of Operations
|
|
|
|
Sass has a pretty standard [order of operations][], from tightest to loosest:
|
|
|
|
[order of operations]: https://en.wikipedia.org/wiki/Order_of_operations#Programming_languages
|
|
|
|
1. The unary operators [`not`][], [`+`, `-`][], and [`/`][].
|
|
2. The [`*`, `/`, and `%` operators][].
|
|
3. The [`+` and `-` operators][].
|
|
4. The [`>`, `>=`, `<` and `<=` operators][].
|
|
5. The [`==` and `!=` operators][].
|
|
6. The [`and` operator][].
|
|
7. The [`or` operator][].
|
|
8. The [`=` operator][], when it's available.
|
|
|
|
[`not`]: /documentation/operators/boolean
|
|
[`+`, `-`]: /documentation/operators/numeric#unary-operators
|
|
[`/`]: /documentation/operators/string#unary-operators
|
|
[`*`, `/`, and `%` operators]: /documentation/operators/numeric
|
|
[`+` and `-` operators]: /documentation/operators/numeric
|
|
[`>`, `>=`, `<` and `<=` operators]: /documentation/operators/relational
|
|
[`==` and `!=` operators]: /documentation/operators/equality
|
|
[`and` operator]: /documentation/operators/boolean
|
|
[`or` operator]: /documentation/operators/boolean
|
|
[`=` operator]: #single-equals
|
|
{% endmarkdown %}
|
|
|
|
{% codeExample 'operators', false %}
|
|
@debug 1 + 2 * 3 == 1 + (2 * 3); // true
|
|
@debug true or false and false == true or (false and false); // true
|
|
===
|
|
@debug 1 + 2 * 3 == 1 + (2 * 3) // true
|
|
@debug true or false and false == true or (false and false) // true
|
|
{% endcodeExample %}
|
|
|
|
{% markdown %}
|
|
### Parentheses
|
|
|
|
You can explicitly control the order of operations using parentheses. An
|
|
operation inside parentheses is always evaluated before any operations outside
|
|
of them. Parentheses can even be nested, in which case the innermost
|
|
parentheses will be evaluated first.
|
|
{% endmarkdown %}
|
|
|
|
{% codeExample 'parentheses', false %}
|
|
@debug (1 + 2) * 3; // 9
|
|
@debug ((1 + 2) * 3 + 4) * 5; // 65
|
|
===
|
|
@debug (1 + 2) * 3 // 9
|
|
@debug ((1 + 2) * 3 + 4) * 5 // 65
|
|
{% endcodeExample %}
|
|
|
|
{% markdown %}
|
|
## Single Equals
|
|
|
|
Sass supports a special `=` operator that's only allowed in function
|
|
arguments, which just creates an [unquoted string][] with its two operands
|
|
separated by `=`. This exists for backwards-compatibility with very old
|
|
IE-only syntax.
|
|
|
|
[unquoted string]: /documentation/values/strings#unquoted
|
|
{% endmarkdown %}
|
|
|
|
{% codeExample 'single-equals' %}
|
|
.transparent-blue {
|
|
filter: chroma(color=#0000ff);
|
|
}
|
|
===
|
|
.transparent-blue
|
|
filter: chroma(color=#0000ff)
|
|
{% endcodeExample %}
|