danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-30 04:29:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Review operators docs

Browse Source
This commit is contained in:
Jonny Gerig Meyer 2023-06-08 21:44:39 -04:00
parent d0478dc67f
commit c74dd3bc63
No known key found for this signature in database
6 changed files with 91 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
source/documentation/operators/boolean.liquid
View File

@ -4,12 +4,13 @@ introduction: >
Unlike languages like JavaScript, Sass uses words rather than symbols for its
[boolean](/documentation/values/booleans) operators.
---
{% markdown %}
- `not <expression>` returns the opposite of the expression's value: it turns
* `not <expression>` returns the opposite of the expression's value: it turns
`true` into `false` and `false` into `true`.
- `<expression> and <expression>` returns `true` if *both* expressions' values
* `<expression> and <expression>` returns `true` if *both* expressions' values
are `true`, and `false` if either is `false`.
- `<expression> or <expression>` returns `true` if *either* expression's value
* `<expression> or <expression>` returns `true` if *either* expression's value
is `true`, and `false` if both are `false`.
{% endmarkdown %}

27
source/documentation/operators/equality.liquid
View File

@ -1,6 +1,7 @@
---
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
@ -19,21 +20,23 @@ title: Equality Operators
[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
* [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
* [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.
* [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.
* [`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

12
source/documentation/operators/index.liquid
View File

@ -5,6 +5,7 @@ introduction: >
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 %}
@ -67,8 +68,8 @@ introduction: >
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.
of them. Parentheses can even be nested, in which case the innermost
parentheses will be evaluated first.
{% endmarkdown %}
{% codeExample 'parentheses', false %}
@ -82,9 +83,10 @@ introduction: >
{% 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.
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 %}

80
source/documentation/operators/numeric.liquid
View File

@ -3,19 +3,19 @@ title: Numeric Operators
table_of_contents: true
introduction: >
Sass supports the standard set of mathematical operators for
[numbers](/documentation/values/numbers). They automatically convert between compatible
units.
[numbers](/documentation/values/numbers). They automatically convert between
compatible units.
---
{% markdown %}
- `<expression> + <expression>` adds the first [expression][]'s value to the
* `<expression> + <expression>` adds the first [expression][]'s value to the
second's.
- `<expression> - <expression>` subtracts the first [expression][]'s value from
* `<expression> - <expression>` subtracts the first [expression][]'s value
from the second's.
* `<expression> * <expression>` multiplies the first [expression][]'s value by
the second's.
- `<expression> * <expression>` multiplies the first [expression][]'s value by
the second's.
- `<expression> % <expression>` returns the remainder of the first
[expression][]'s value divided by the second's. This is known as the [*modulo*
operator][].
* `<expression> % <expression>` returns the remainder of the first
[expression][]'s value divided by the second's. This is known as the
[*modulo* operator][].
[expression]: /documentation/syntax/structure#expressions
[*modulo* operator]: https://en.wikipedia.org/wiki/Modulo_operation
@ -65,8 +65,8 @@ introduction: >
You can also write `+` and `-` as unary operators, which take only one value:
- `+<expression>` returns the expression's value without changing it.
- `-<expression>` returns the negative version of the expression's value.
* `+<expression>` returns the expression's value without changing it.
* `-<expression>` returns the negative version of the expression's value.
{% endmarkdown %}
{% codeExample 'unary-operators', false %}
@ -84,21 +84,25 @@ introduction: >
Because `-` can refer to both subtraction and unary negation, it can be
confusing which is which in a space-separated list. To be safe:
- Always write spaces on both sides of `-` when subtracting.
- Write a space before `-` but not after for a negative number or a unary
* Always write spaces on both sides of `-` when subtracting.
* Write a space before `-` but not after for a negative number or a unary
negation.
- Wrap unary negation in parentheses if it's in a space-separated list.
* Wrap unary negation in parentheses if it's in a space-separated list.
The different meanings of `-` in Sass take precedence in the following order:
The different meanings of `-` in Sass take precedence in the following
order:
1. `-` as part of an identifier. The only exception are units; Sass normally
allows any valid identifier to be used as an identifier, but units may not
contain a hyphen followed by a digit.
2. `-` between an expression and a literal number with no whitespace, which is
parsed as subtraction.
3. `-` at the beginning of a literal number, which is parsed as a negative number.
4. `-` between two numbers regardless of whitespace, which is parsed as subtraction.
5. `-` before a value other than a literal number, which is parsed as unary negation.
2. `-` between an expression and a literal number with no whitespace, which
is parsed as subtraction.
3. `-` at the beginning of a literal number, which is parsed as a negative
number.
4. `-` between two numbers regardless of whitespace, which is parsed as
subtraction.
5. `-` before a value other than a literal number, which is parsed as unary
negation.
{% endmarkdown %}
{% codeExample 'heads-up-subtraction-unary-negation', false %}
@ -122,35 +126,35 @@ introduction: >
{% endcodeExample %}
{% endheadsUp %}
{{ '## Division' | markdown }}
{% compatibility 'dart: "1.33.0"', 'libsass: false', 'ruby: false', 'feature: "math.div()"' %}{% endcompatibility %}
{% markdown %}
## Division
{% compatibility 'dart: "1.33.0"', 'libsass: false', 'ruby: false', 'feature: "math.div()"' %}{% endcompatibility %}
Unlike other mathematical operations, division in Sass is done with the
[`math.div()`] function. Although many programming languages use `/` as a
division operator, in CSS `/` is used as a separator (as in `font: 15px/32px` or
`hsl(120 100% 50% / 0.8)`). While Sass does support the use of `/` as a division
operator, this is deprecated and [will be removed] in a future version.
division operator, in CSS `/` is used as a separator (as in `font: 15px/32px`
or `hsl(120 100% 50% / 0.8)`). While Sass does support the use of `/` as a
division operator, this is deprecated and [will be removed] in a future
version.
[`math.div()`]: /documentation/modules/math#div
[will be removed]: /documentation/breaking-changes/slash-div
### Slash-Separated Values
For the time being while Sass still supports `/` as a division operator, it has
to have a way to disambiguate between `/` as a separator and `/` as division. In
order to make this work, if two numbers are separated by `/`, Sass will print
the result as slash-separated instead of divided unless one of these conditions
is met:
For the time being while Sass still supports `/` as a division operator, it
has to have a way to disambiguate between `/` as a separator and `/` as
division. In order to make this work, if two numbers are separated by `/`,
Sass will print the result as slash-separated instead of divided unless one of
these conditions is met:
- Either expression is anything other than a literal number.
- The result is stored in a variable or returned by a function.
- The operation is surrounded by parentheses, unless those parentheses are
* Either expression is anything other than a literal number.
* The result is stored in a variable or returned by a function.
* The operation is surrounded by parentheses, unless those parentheses are
outside a list that contains the operation.
- The result is used as part of another operation (other than `/`).
- The result is returned by a [calculation].
* The result is used as part of another operation (other than `/`).
* The result is returned by a [calculation].
[calculation]: /documentation/values/calculations

19
source/documentation/operators/relational.liquid
View File

@ -1,18 +1,19 @@
---
title: Relational Operators
introduction: >
Relational operators determine whether [numbers](/documentation/values/numbers) are larger
or smaller than one another. They automatically convert between compatible
units.
Relational operators determine whether
[numbers](/documentation/values/numbers) are larger or smaller than one
another. They automatically convert between compatible units.
---
{% markdown %}
- `<expression> < <expression>` returns whether the first [expression][]'s value
is less than the second's.
- `<expression> <= <expression>` returns whether the first [expression][]'s
* `<expression> < <expression>` returns whether the first [expression][]'s
value is less than the second's.
* `<expression> <= <expression>` returns whether the first [expression][]'s
value is less than or equal to the second's.
- `<expression> > <expression>` returns whether the first [expression][]'s value
is greater than to the second's.
- `<expression> >= <expression>`, returns whether the first [expression][]'s
* `<expression> > <expression>` returns whether the first [expression][]'s
value is greater than to the second's.
* `<expression> >= <expression>`, returns whether the first [expression][]'s
value is greater than or equal to the second's.
[expression]: /documentation/syntax/structure#expressions

24
source/documentation/operators/string.liquid
View File

@ -1,14 +1,16 @@
---
title: String Operators
introduction: >
Sass supports a few operators that generate [strings](/documentation/values/strings):
Sass supports a few operators that generate
[strings](/documentation/values/strings):
---
{% markdown %}
- `<expression> + <expression>` returns a string that contains both expressions'
values. If the either value is a [quoted string][], the result will be quoted;
otherwise, it will be unquoted.
- `<expression> - <expression>` returns an unquoted string that contains both
{% markdown %}
* `<expression> + <expression>` returns a string that contains both
expressions' values. If the either value is a [quoted string][], the result
will be quoted; otherwise, it will be unquoted.
* `<expression> - <expression>` returns an unquoted string that contains both
expressions' values, separated by `-`. This is a legacy operator, and
[interpolation][] should generally be used instead.
@ -30,10 +32,10 @@ introduction: >
These operators don't just work for strings! They can be used with any values
that can be written to CSS, with a few exceptions:
- Numbers can't be used as the left-hand value, because they have [their own
* Numbers can't be used as the left-hand value, because they have [their own
operators][numeric].
- Colors can't be used as the left-hand value, because they used to have [their
own operators][color].
* Colors can't be used as the left-hand value, because they used to have
[their own operators][color].
[numeric]: /documentation/operators/numeric
[color]: /documentation/operators
@ -60,9 +62,9 @@ introduction: >
For historical reasons, Sass also supports `/` and `-` as a unary operators
which take only one value:
- `/<expression>` returns an unquoted string starting with `/` and followed by
* `/<expression>` returns an unquoted string starting with `/` and followed by
the expression's value.
- `-<expression>` returns an unquoted string starting with `-` and followed by
* `-<expression>` returns an unquoted string starting with `-` and followed by
the expression's value.
{% endmarkdown %}