Sass Operators

What Operators Does Sass Support?

Sass provides arithmetic operators (+, -, *, %), comparison operators (==, !=, <, >, <=, >=), logical operators (and, or, not), and string concatenation through interpolation or the + operator on strings.

$gap: 8px;
$columns: 3;

.grid {
  gap: $gap;
  width: $gap * $columns; // => 24px
}

Arithmetic operators work directly on numbers with compatible units, producing a new computed number.

Operator Categories

+  -  *  %          // arithmetic
==  !=  <  >  <=  >=  // comparison
and  or  not         // logical
+                    // string concatenation

• Arithmetic: +, -, *, and % (modulo) work on numbers.
• Comparison operators return a boolean and are commonly used inside @if.
• Logical operators (and, or, not) combine boolean expressions.
• Division uses math.div() instead of /, since / is reserved for plain CSS shorthand like font: 16px/1.5.

Sass Operators Cheatsheet

The operators you'll use across variables, control rules, and functions.

Arithmetic Operators

Arithmetic operators work directly on numbers, and Sass respects CSS units during the calculation, adding two px values produces a px result, multiplying a number by a unitless number keeps the original unit.

$base: 8px;

.spacer-sm { margin: $base;     } // 8px
.spacer-md { margin: $base * 2; } // 16px
.spacer-lg { margin: $base * 3; } // 24px

Why math.div() Replaced the / Operator

Plain CSS already uses / for shorthand properties like font: 16px/1.5 and border-radius: 4px / 8px. Because of this ambiguity, Dart Sass deprecated using / for actual division and introduced math.div() as the unambiguous replacement.

@use 'sass:math';

$container: 960px;
.column {
  width: math.div($container, 4); // => 240px, unambiguous
}

Comparison and Logical Operators

Comparison operators return true or false and are most useful inside @if statements or when building conditional function logic. Logical operators combine multiple boolean checks into one expression.

@mixin responsive-text($size, $bold: false) {
  font-size: $size;

  @if $size > 24px and $bold {
    font-weight: 700;
  }
}

Common Mistakes

• Using / for division and getting unexpected results or deprecation warnings; use math.div() instead.
• Comparing values of incompatible types (like a string and a number) and being surprised the result is always false rather than an error.
• Forgetting operator precedence, multiplication and division bind tighter than addition and subtraction, just like in most programming languages.
• Trying to use && or || instead of Sass's actual keyword-based and/or logical operators.

Key Takeaways

• Sass supports arithmetic, comparison, logical, and string operators.
• Arithmetic respects CSS units and raises an error for incompatible unit combinations.
• math.div() replaced / for numeric division to avoid ambiguity with CSS shorthand syntax.
• Logical operators use the keywords and, or, and not, not symbolic operators.