Skip to main content

Sass: Numeric Operators

Sass supports the standard set of mathematical operators for 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.
@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in

Unit-less numbers can be used with numbers of any unit.

@debug 100px + 50; // 150px
@debug 4s * 10; // 40s

Numbers with incompatible units can’t be used with addition, subtraction, or modulo.

@debug 100px + 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

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.
@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px
note

To avoid confusion:

  • 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.
note

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.

For example:

@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

Division Operation​

In Sass, division is done with the math.div() function because the symbol /, used in many programming languages, in CSS is used as a separator.

note

While Sass does support the use of / as a division operator, this is deprecated and will be removed in a future version.

Units​

Sass has powerful support for manipulating units based on how real-world unit calculations work. When two numbers are multiplied, their units are multiplied as well. When one number is divided by another, the result takes its numerator units from the first number and its denominator units from the second. A number can have any number of units in the numerator and/or denominator.

Example:

@debug 4px * 6px; // 24px*px (read "square pixels")
@debug math.div(5px, 2s); // 2.5px/s (read "pixels per second")

// 3.125px*deg/s*em (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em); 

$degrees-per-second: math.div(20deg, 1s);
@debug $degrees-per-second; // 20deg/s
@debug math.div(1, $degrees-per-second); // 0.05s/deg

Sass will automatically convert between compatible units, although which unit it will choose for the result depends on which implementation of Sass you’re using.If you try to combine incompatible units, like 1in + 1em, Sass will throw an error.

// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.

note

You should especially avoid using interpolation like #{$number}px, because this does not actually create a number!

Try to make your math unit-clean so that $number already has the unit px, or write $number * 1px.

note

Percentages in Sass work just like every other unit.

They are not interchangeable with decimals, because in CSS decimals and percentages mean different things.

For example, 50% is a number with % as its unit, and Sass considers it different from the number 0.5.

Table of Contents