Sass Numeric Operators

What You’ll Learn

Sass numeric operators perform math on numbers: add, subtract, multiply, and modulo. Prefer math.div() for division. This page covers units, unary +/-, complex units, percentages, and five compiled examples.

What Are Numeric Operators?

Official docs: Sass supports the standard set of mathematical operators for numbers. They automatically convert between compatible units.

• Math runs when Sass compiles—not in the browser.
• Results are numbers (sometimes with complex units).
• Unitless values can mix with any unit for these operators.
• Incompatible units fail for +, -, and %.
• Use math.div() instead of deprecated / division.

📝 Syntax

@use "sass:math";

$a + $b   // add
$a - $b   // subtract
$a * $b   // multiply
$a % $b   // modulo (remainder)

math.div($a, $b)  // divide (preferred)

Operators

Official samples

🔢 Unitless Numbers

Official docs: unitless numbers can be used with numbers of any unit.

⚠️ Incompatible Units

Official docs: numbers with incompatible units can’t be used with addition, subtraction, or modulo.

// Error: Incompatible units px and s.
@debug 100px + 10s;

• Length + time fails (px + s).
• Multiplication / math.div may create complex units instead of failing.
• Keep addition and subtraction in the same measurement family.

➖ Unary Operators

Official docs: you can write + and - as unary operators that take only one value.

Hyphen / minus clarity

Because - can mean subtraction or unary negation, official docs recommend:

• Spaces on both sides of - when subtracting.
• A space before - but not after for a negative number.
• Wrap unary negation in parentheses inside space-separated lists.

@debug 5px - 3px;   // subtraction → 2px
@debug 1 -2 3;      // list: 1, -2, 3

$number: 2;
@debug 1 -$number 3;     // unary then list → -1 3
@debug 1 (-$number) 3;   // safer → 1 -2 3

🔢 Division With math.div()

@use "sass:math";
@use "sass:list";

@debug math.div(15px, 30px);           // 0.5
@debug list.slash(15px, 30px);         // 15px/30px (separator)

⚖️ How Units Work

Official docs: when two numbers are multiplied, their units multiply. When one number is divided by another, the result takes numerator units from the first and denominator units from the second.

Percentages vs decimals

Official docs: percentages are not interchangeable with decimals. 50% has a % unit; 0.5 does not.

• math.div($percentage, 100%) → decimal
• $decimal * 100% or math.percentage($decimal) → percent

Examples Gallery

Each example uses numeric operators at compile time. Open View Compiled CSS for verified output (values shown with meta.inspect where helpful).

@use "sass:meta";

.ops {
  --add: #{meta.inspect(10s + 15s)};
  --sub: #{meta.inspect(1in - 10px)};
  --mul: #{meta.inspect(5px * 3px)};
  --mod: #{meta.inspect(1in % 9px)};
}

.ops {
  --add: 25s;
  --sub: 0.8958333333in;
  --mul: 15px*px;
  --mod: 0.0625in;
}

@use "sass:meta";

.ops {
  --ul-add: #{meta.inspect(100px + 50)};
  --ul-mul: #{meta.inspect(4s * 10)};
  --unary-plus: #{meta.inspect(+(5s + 7s))};
  --unary-neg: #{meta.inspect(-(50px + 30px))};
  --unary-flip: #{meta.inspect(-(10px - 15px))};
}

.ops {
  --ul-add: 150px;
  --ul-mul: 40s;
  --unary-plus: 12s;
  --unary-neg: -80px;
  --unary-flip: 5px;
}

@use "sass:math";
@use "sass:meta";

.ops {
  --div: #{meta.inspect(math.div(15px, 30px))};
  --pct: #{meta.inspect(0.5 * 100%)};
  --dec: #{meta.inspect(math.div(50%, 100%))};
  --rate: #{meta.inspect(math.div(5px, 2s))};
}

.ops {
  --div: 0.5;
  --pct: 50%;
  --dec: 0.5;
  --rate: 2.5px/s;
}

@use "sass:math";

$transition-speed: math.div(1s, 50px);

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}

.slider {
  @include move(10px, 120px);
}

.slider {
  position: absolute;
  left: 10px;
  transition: left 2.2s;
}
.slider:hover {
  left: 120px;
}

@use "sass:math";

$base: 16px;
$pad: 8px;

.box {
  width: $base * 10;
  padding: $pad;
  margin-top: $base - $pad;
  font-size: math.div($base * 3, 2);
}

.box {
  width: 160px;
  padding: 8px;
  margin-top: 8px;
  font-size: 24px;
}

🚀 Real-World Use Cases

• Spacing scales — derive padding and gaps from a base token.
• Type scales — multiply or divide to build modular sizes.
• Duration math — convert ratios like pixels-per-second into times.
• Percent helpers — convert opacity decimals to percentages safely.
• Grid math — compute column widths and gutters at compile time.

⚠️ Common Pitfalls

• Deprecated / division — use math.div().
• Incompatible + / - — 100px + 10s fails.
• Minus ambiguity — space carefully in lists; prefer parentheses.
• #{$n}px — creates a string, not a number.
• Percent ≠ decimal — convert explicitly with unit math.

💡 Best Practices