Skip to content
Tutorial Reference

Sass Operations

Learn about Sass operators for numbers, strings, booleans, equality checks, and relational comparisons, including their behavior with units and special cases like colors.

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.

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.
Navigation