Sass Operators

Last Updated:

Sass Operators

Sass supports a handful of useful operators for working with different values. The following are the different types of operators available in Sass. Sass has a pretty standard order of operations, from tightest to loosest, but you can explicitly control the order of operations using parentheses.

Example

SASS TO CSS CONVERTER
//Check your console @debug 1px == 1px; // true @debug 100 < 50; // false @debug 1in - 10px; // 0.8958333333in @debug "Helvetica" + " Neue"; // "Helvetica Neue" @debug true and true; // true

Types of Operator

The following are the different types of operators available in Sass.

Types of OperatorSymbolic Representation
Equality Operators ==, !=
Relational Operators <, <=, >, >=
Numeric Operators +, -, *, /, %
String Operators +, -, /
Boolean Operators and, or, not

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.

Parentheses

You can explicitly control the order of operations using parentheses.

Example

SASS TO CSS CONVERTER
//Check your console @debug (1 + 2) * 3; // 9 @debug ((1 + 2) * 3 + 4) * 5; // 65

Share this Page

Meet the Author