Sass Numeric Operators

Last Updated:

What is Numeric Operators?

Numeric Operators perform a mathematical operation between numbers. They automatically convert between compatible units.

Note: The unit comes first has higher priority over the following units. For example, consider the following

  • 1in - 10px returns 0.8958333333, which is in inches.
  • 1px + 1in returns 97, which is in pixels.

Example

SASS TO CSS CONVERTER
//Check your console @debug 10s + 15s; // 25 @debug 1in - 10px; // 0.8958333333 @debug 5px * 4; // 20 @debug (12px / 4px); // 3 @debug 1in % 9px; // 0.0625

Sass Numeric Operators

The following table provides a list of numeric operators available in Sass.

OperatorExplanationOperationResult
+ adds 10s + 15s 25
- subtracts 1in - 10px 0.8958333333
* multiplies 5px * 4 20
/ divides (12px / 4px) 3
% remainder 1in % 9px 0.0625

Sass Numeric Operators with Incompatible Units

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

Example

SASS TO CSS CONVERTER
//Check your console @debug 10s + 15px; // error

Share this Page

Meet the Author