mirror of
https://github.com/danog/sass-site.git
synced 2024-12-06 13:58:59 +01:00
60 lines
1.7 KiB
Plaintext
60 lines
1.7 KiB
Plaintext
---
|
|
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.
|
|
---
|
|
|
|
{% 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]: /documentation/syntax/structure#expressions
|
|
{% endmarkdown %}
|
|
|
|
{% codeExample 'relational', false %}
|
|
@debug 100 > 50; // true
|
|
@debug 10px < 17px; // true
|
|
@debug 96px >= 1in; // true
|
|
@debug 1000ms <= 1s; // true
|
|
===
|
|
@debug 100 > 50 // true
|
|
@debug 10px < 17px // true
|
|
@debug 96px >= 1in // true
|
|
@debug 1000ms <= 1s // true
|
|
{% endcodeExample %}
|
|
|
|
{% markdown %}
|
|
Unitless numbers can be compared with any number. They're automatically
|
|
converted to that number's unit.
|
|
{% endmarkdown %}
|
|
|
|
{% codeExample 'unitless-numbers', false %}
|
|
@debug 100 > 50px; // true
|
|
@debug 10px < 17; // true
|
|
===
|
|
@debug 100 > 50px // true
|
|
@debug 10px < 17 // true
|
|
{% endcodeExample %}
|
|
|
|
{% markdown %}
|
|
Numbers with incompatible units can't be compared.
|
|
{% endmarkdown %}
|
|
|
|
{% codeExample 'incompatible-units', false %}
|
|
@debug 100px > 10s;
|
|
// ^^^^^^^^^^^
|
|
// Error: Incompatible units px and s.
|
|
===
|
|
@debug 100px > 10s
|
|
// ^^^^^^^^^^^
|
|
// Error: Incompatible units px and s.
|
|
{% endcodeExample %}
|