mirror of
https://github.com/danog/sass-site.git
synced 2024-12-14 02:17:36 +01:00
172 lines
5.2 KiB
Plaintext
172 lines
5.2 KiB
Plaintext
---
|
|
title: Numeric Operators
|
|
table_of_contents: true
|
|
---
|
|
|
|
Sass supports the standard set of mathematical operators for [numbers][]. They
|
|
automatically convert between compatible units.
|
|
|
|
[numbers]: ../values/numbers
|
|
|
|
* `<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>` divides 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]: ../syntax/structure#expressions
|
|
[*modulo* operator]: https://en.wikipedia.org/wiki/Modulo_operation
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@debug 10s + 15s; // 25s
|
|
@debug 1in - 10px; // 0.8958333333in
|
|
@debug 5px * 3px; // 15px*px
|
|
@debug (12px/4px); // 3
|
|
@debug 1in % 9px; // 0.0625in
|
|
===
|
|
@debug 10s + 15s // 25s
|
|
@debug 1in - 10px // 0.8958333333in
|
|
@debug 5px * 3px // 15px*px
|
|
@debug (12px/4px) // 3
|
|
@debug 1in % 9px // 0.0625in
|
|
<% end %>
|
|
|
|
Unitless numbers can be used with numbers of any unit.
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@debug 100px + 50; // 150px
|
|
@debug 4s * 10; // 40s
|
|
===
|
|
@debug 100px + 50 // 150px
|
|
@debug 4s * 10 // 40s
|
|
<% end %>
|
|
|
|
Numbers with incompatible units can't be used with addition, subtraction, or
|
|
modulo.
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@debug 100px + 10s;
|
|
// ^^^^^^^^^^^
|
|
// Error: Incompatible units px and s.
|
|
===
|
|
@debug 100px + 10s
|
|
// ^^^^^^^^^^^
|
|
// Error: Incompatible units px and s.
|
|
<% end %>
|
|
|
|
## 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.
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@debug +(5s + 7s); // 12s
|
|
@debug -(50px + 30px); // -80px
|
|
@debug -(10px - 15px); // 5px
|
|
===
|
|
@debug +(5s + 7s) // 12s
|
|
@debug -(50px + 30px) // -80px
|
|
@debug -(10px - 15px) // 5px
|
|
<% end %>
|
|
|
|
<% heads_up do %>
|
|
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.
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@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
|
|
<% end %>
|
|
<% end %>
|
|
|
|
## Slash-Separated Values
|
|
|
|
A few CSS properties support `/` as a way of separating values. This means Sass
|
|
has to disambiguate between `/` as a property value 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.
|
|
|
|
If you want to force `/` to be used as a separator, you can write it as
|
|
`#{<expression>} / #{<expression>}`.
|
|
|
|
<% example do %>
|
|
@debug 15px / 30px; // 15px/30px
|
|
@debug (10px + 5px) / 30px; // 0.5
|
|
@debug #{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
|
|
===
|
|
@debug 15px / 30px // 15px/30px
|
|
@debug (10px + 5px) / 30px // 0.5
|
|
|
|
$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
|
|
<% end %>
|
|
|
|
<%= partial 'documentation/snippets/number-units' %>
|