danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2025-01-22 13:51:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

Convert operators docs to use md

Browse Source
This commit is contained in:
Jonny Gerig Meyer 2023-06-22 14:38:01 -04:00
parent 95b50526f9
commit 69ee85ae0d
No known key found for this signature in database
9 changed files with 405 additions and 446 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
source/documentation/operators/boolean.liquid → source/documentation/operators/boolean.md
View File

@ -5,14 +5,12 @@ introduction: >
[boolean](/documentation/values/booleans) operators.
---
{% markdown %}
* `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
are `true`, and `false` if either is `false`.
* `<expression> or <expression>` returns `true` if *either* expression's value
is `true`, and `false` if both are `false`.
{% endmarkdown %}
* `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
are `true`, and `false` if either is `false`.
* `<expression> or <expression>` returns `true` if *either* expression's value
is `true`, and `false` if both are `false`.
{% codeExample 'boolean', false %}
@debug not true; // false

70
source/documentation/operators/equality.liquid → source/documentation/operators/equality.md
View File

@ -10,46 +10,42 @@ title: Equality Operators
[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:
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
[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][] 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 %}
[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
{% codeExample 'equality', false %}
@debug 1px == 1px; // true

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

@ -1,101 +0,0 @@
---
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 %}

92
source/documentation/operators/index.md Normal file
View File

@ -0,0 +1,92 @@
---
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:
---
{% render 'doc_snippets/operator-list', parens: false %}
{% 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 %}
## 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
{% 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 %}
### 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.
{% 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 %}
## 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
{% codeExample 'single-equals' %}
.transparent-blue {
filter: chroma(color=#0000ff);
}
===
.transparent-blue
filter: chroma(color=#0000ff)
{% endcodeExample %}

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

@ -1,205 +0,0 @@
---
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.
---
{% markdown %}
* `<expression> + <expression>` adds the first [expression][]'s value to the
second's.
* `<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>` 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
{% endmarkdown %}
{% codeExample 'numeric', false %}
@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in
===
@debug 10s + 15s // 25s
@debug 1in - 10px // 0.8958333333in
@debug 5px * 3px // 15px*px
@debug 1in % 9px // 0.0625in
{% endcodeExample %}
{% markdown %}
Unitless numbers can be used with numbers of any unit.
{% endmarkdown %}
{% codeExample 'unitless-numbers', false %}
@debug 100px + 50; // 150px
@debug 4s * 10; // 40s
===
@debug 100px + 50 // 150px
@debug 4s * 10 // 40s
{% endcodeExample %}
{% markdown %}
Numbers with incompatible units can't be used with addition, subtraction, or
modulo.
{% endmarkdown %}
{% codeExample 'incompatible-units', false %}
@debug 100px + 10s;
// ^^^^^^^^^^^
// Error: Incompatible units px and s.
===
@debug 100px + 10s
// ^^^^^^^^^^^
// Error: Incompatible units px and s.
{% endcodeExample %}
{% markdown %}
## Unary Operators
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.
{% endmarkdown %}
{% codeExample 'unary-operators', false %}
@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px
===
@debug +(5s + 7s) // 12s
@debug -(50px + 30px) // -80px
@debug -(10px - 15px) // 5px
{% endcodeExample %}
{% headsUp, false %}
{% markdown %}
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
negation.
* 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:
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.
{% endmarkdown %}
{% codeExample 'heads-up-subtraction-unary-negation', false %}
@debug a-1; // a-1
@debug 5px-3px; // 2px
@debug 5-3; // 2
@debug 1 -2 3; // 1 -2 3
$number: 2;
@debug 1 -$number 3; // -1 3
@debug 1 (-$number) 3; // 1 -2 3
===
@debug a-1 // a-1
@debug 5px-3px // 2px
@debug 5-3 // 2
@debug 1 -2 3 // 1 -2 3
$number: 2
@debug 1 -$number 3 // -1 3
@debug 1 (-$number) 3 // 1 -2 3
{% endcodeExample %}
{% endheadsUp %}
{% 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.
[`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:
* 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].
[calculation]: /documentation/values/calculations
You can use [`list.slash()`] to force `/` to be used as a separator.
[`list.slash()`]: /documentation/modules/list#slash
{% endmarkdown %}
{% codeExample 'slash-separated-values', false %}
@use "sass:list";
@debug 15px / 30px; // 15px/30px
@debug (10px + 5px) / 30px; // 0.5
@debug list.slash(10px + 5px, 30px); // 15px/30px
$result: 15px / 30px;
@debug $result; // 0.5
@function fifteen-divided-by-thirty() {
@return 15px / 30px;
}
@debug fifteen-divided-by-thirty(); // 0.5
@debug (15px/30px); // 0.5
@debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
@debug 15px/30px + 1; // 1.5
===
@use "sass:list";
@debug 15px / 30px // 15px/30px
@debug (10px + 5px) / 30px // 0.5
@debug list.slash(10px + 5px, 30px) // 15px/30px
$result: 15px / 30px
@debug $result // 0.5
@function fifteen-divided-by-thirty()
@return 15px / 30px
@debug fifteen-divided-by-thirty() // 0.5
@debug (15px/30px) // 0.5
@debug (bold 15px/30px sans-serif) // bold 15px/30px sans-serif
@debug 15px/30px + 1 // 1.5
{% endcodeExample %}
{% render 'doc_snippets/number-units' %}

191
source/documentation/operators/numeric.md Normal file
View File

@ -0,0 +1,191 @@
---
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.
---
* `<expression> + <expression>` adds the first [expression][]'s value to the
second's.
* `<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>` 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
{% codeExample 'numeric', false %}
@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in
===
@debug 10s + 15s // 25s
@debug 1in - 10px // 0.8958333333in
@debug 5px * 3px // 15px*px
@debug 1in % 9px // 0.0625in
{% endcodeExample %}
Unitless numbers can be used with numbers of any unit.
{% codeExample 'unitless-numbers', false %}
@debug 100px + 50; // 150px
@debug 4s * 10; // 40s
===
@debug 100px + 50 // 150px
@debug 4s * 10 // 40s
{% endcodeExample %}
Numbers with incompatible units can't be used with addition, subtraction, or
modulo.
{% codeExample 'incompatible-units', false %}
@debug 100px + 10s;
// ^^^^^^^^^^^
// Error: Incompatible units px and s.
===
@debug 100px + 10s
// ^^^^^^^^^^^
// Error: Incompatible units px and s.
{% endcodeExample %}
## Unary Operators
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.
{% codeExample 'unary-operators', false %}
@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px
===
@debug +(5s + 7s) // 12s
@debug -(50px + 30px) // -80px
@debug -(10px - 15px) // 5px
{% endcodeExample %}
{% headsUp %}
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
negation.
* 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:
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.
{% codeExample 'heads-up-subtraction-unary-negation', false %}
@debug a-1; // a-1
@debug 5px-3px; // 2px
@debug 5-3; // 2
@debug 1 -2 3; // 1 -2 3
$number: 2;
@debug 1 -$number 3; // -1 3
@debug 1 (-$number) 3; // 1 -2 3
===
@debug a-1 // a-1
@debug 5px-3px // 2px
@debug 5-3 // 2
@debug 1 -2 3 // 1 -2 3
$number: 2
@debug 1 -$number 3 // -1 3
@debug 1 (-$number) 3 // 1 -2 3
{% endcodeExample %}
{% endheadsUp %}
## 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.
[`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:
* 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].
[calculation]: /documentation/values/calculations
You can use [`list.slash()`] to force `/` to be used as a separator.
[`list.slash()`]: /documentation/modules/list#slash
{% codeExample 'slash-separated-values', false %}
@use "sass:list";
@debug 15px / 30px; // 15px/30px
@debug (10px + 5px) / 30px; // 0.5
@debug list.slash(10px + 5px, 30px); // 15px/30px
$result: 15px / 30px;
@debug $result; // 0.5
@function fifteen-divided-by-thirty() {
@return 15px / 30px;
}
@debug fifteen-divided-by-thirty(); // 0.5
@debug (15px/30px); // 0.5
@debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
@debug 15px/30px + 1; // 1.5
===
@use "sass:list";
@debug 15px / 30px // 15px/30px
@debug (10px + 5px) / 30px // 0.5
@debug list.slash(10px + 5px, 30px) // 15px/30px
$result: 15px / 30px
@debug $result // 0.5
@function fifteen-divided-by-thirty()
@return 15px / 30px
@debug fifteen-divided-by-thirty() // 0.5
@debug (15px/30px) // 0.5
@debug (bold 15px/30px sans-serif) // bold 15px/30px sans-serif
@debug 15px/30px + 1 // 1.5
{% endcodeExample %}
{% render 'doc_snippets/number-units' %}

30
source/documentation/operators/relational.liquid → source/documentation/operators/relational.md
View File

@ -6,18 +6,16 @@ introduction: >
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
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
value is greater than or equal to the second'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
value is greater than or equal to the second's.
[expression]: /documentation/syntax/structure#expressions
{% endmarkdown %}
[expression]: /documentation/syntax/structure#expressions
{% codeExample 'relational', false %}
@debug 100 > 50; // true
@ -31,10 +29,8 @@ introduction: >
@debug 1000ms <= 1s // true
{% endcodeExample %}
{% markdown %}
Unitless numbers can be compared with any number. They're automatically
converted to that number's unit.
{% endmarkdown %}
Unitless numbers can be compared with any number. They're automatically
converted to that number's unit.
{% codeExample 'unitless-numbers', false %}
@debug 100 > 50px; // true
@ -44,9 +40,7 @@ introduction: >
@debug 10px < 17 // true
{% endcodeExample %}
{% markdown %}
Numbers with incompatible units can't be compared.
{% endmarkdown %}
Numbers with incompatible units can't be compared.
{% codeExample 'incompatible-units', false %}
@debug 100px > 10s;

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

@ -1,77 +0,0 @@
---
title: String Operators
introduction: >
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
expressions' values, separated by `-`. This is a legacy operator, and
[interpolation][] should generally be used instead.
[quoted string]: /documentation/values/strings#quoted
[interpolation]: /documentation/interpolation
{% endmarkdown %}
{% codeExample 'string', false %}
@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug sans - serif; // sans-serif
===
@debug "Helvetica" + " Neue" // "Helvetica Neue"
@debug sans- + serif // sans-serif
@debug sans - serif // sans-serif
{% endcodeExample %}
{% markdown %}
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
operators][numeric].
* 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
{% endmarkdown %}
{% codeExample 'string-exceptions', false %}
@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true + " is a boolean value"; // "true is a boolean value";
===
@debug "Elapsed time: " + 10s // "Elapsed time: 10s";
@debug true + " is a boolean value" // "true is a boolean value";
{% endcodeExample %}
{% headsUp %}
It's often cleaner and clearer to use [interpolation][] to create strings,
rather than relying on these operators.
[interpolation]: /documentation/interpolation
{% endheadsUp %}
{% markdown %}
## Unary Operators
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
the expression's value.
* `-<expression>` returns an unquoted string starting with `-` and followed by
the expression's value.
{% endmarkdown %}
{% codeExample 'unary-operators', false %}
@debug / 15px; // /15px
@debug - moz; // -moz
===
@debug / 15px // /15px
@debug - moz // -moz
{% endcodeExample %}

71
source/documentation/operators/string.md Normal file
View File

@ -0,0 +1,71 @@
---
title: String Operators
introduction: >
Sass supports a few operators that generate
[strings](/documentation/values/strings):
---
* `<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.
[quoted string]: /documentation/values/strings#quoted
[interpolation]: /documentation/interpolation
{% codeExample 'string', false %}
@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug sans - serif; // sans-serif
===
@debug "Helvetica" + " Neue" // "Helvetica Neue"
@debug sans- + serif // sans-serif
@debug sans - serif // sans-serif
{% endcodeExample %}
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
operators][numeric].
* 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
{% codeExample 'string-exceptions', false %}
@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true + " is a boolean value"; // "true is a boolean value";
===
@debug "Elapsed time: " + 10s // "Elapsed time: 10s";
@debug true + " is a boolean value" // "true is a boolean value";
{% endcodeExample %}
{% headsUp %}
It's often cleaner and clearer to use [interpolation][] to create strings,
rather than relying on these operators.
[interpolation]: /documentation/interpolation
{% endheadsUp %}
## Unary Operators
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
the expression's value.
* `-<expression>` returns an unquoted string starting with `-` and followed by
the expression's value.
{% codeExample 'unary-operators', false %}
@debug / 15px; // /15px
@debug - moz; // -moz
===
@debug / 15px // /15px
@debug - moz // -moz
{% endcodeExample %}