Skip to main content

Sass Operations

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:

  • == and != are used to check if two values are the same.
  • +, -, *, /, and % have their usual mathematical meaning for numbers, with special behaviors for units that matches the use of units in scientific math.
  • <, <=, >, and >= check whether two numbers are greater or less than one another.
  • and, or, and not have the usual boolean behavior. Sass considers every value “true” except for false and null.
  • +, -, and / can be used to concatenate strings.
note

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.

Order of Operations​

Sass has a pretty standard order of operations, from tightest to loosest:

  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.

Table of Contents