Sass supports standard math for numbers: +, -, *, and % (modulo). Compatible units convert automatically. Prefer math.div() for division.
10s + 15s is 25s; 100px + 50 is 150px (unitless mixes in).
CSS uses / as a separator (font: 15px/32px). / as Sass division is deprecated—use @use "sass:math" and math.div().
Avoid #{$n}px—that builds a string, not a number. Prefer $n * 1px or give $n a unit from the start.
@use "sass:math";
$a + $b // add
$a - $b // subtract
$a * $b // multiply
$a % $b // modulo (remainder)
math.div($a, $b) // divide (preferred)
10s + 15s; // 25s
100px + 50; // 150px
-(50px + 30px); // -80px
// Spaces matter around - :
5px - 3px; // subtraction
-$number; // unary negationPattern: keep units on your numbers → compute with operators / math.div → emit CSS lengths and times.
How units and / behave:
| Case | Result |
|---|---|
Compatible units (1in + 6px) | Converted and combined |
Unitless + unit (100px + 50) | Allowed — unitless adopts the unit |
| Incompatible (+ / - / %) | Compile error (e.g. 100px + 10s) |
* / math.div across units | May produce complex units (often as calc()) |
Literal 15px / 30px | Often a slash-separated value, not division |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
+ - * %Add times, subtract convertible lengths, multiply units, and take modulo.
@use "sass:meta";
.probe {
--a: #{meta.inspect(10s + 15s)};
--b: #{meta.inspect(1in - 10px)};
--c: #{meta.inspect(5px * 3px)};
--d: #{meta.inspect(1in % 9px)};
}calc()).A unitless number can combine with any unit.
@use "sass:meta";
.unitless {
--a: #{meta.inspect(100px + 50)};
--b: #{meta.inspect(4s * 10)};
}px.math.divPrefer the module API over deprecated / division.
@use "sass:math";
@use "sass:meta";
.div {
--a: #{meta.inspect(math.div(15px, 30px))};
--b: #{meta.inspect(math.div(5px, 2s))};
}math.div.+ and -Negate (or leave unchanged) a whole expression.
@use "sass:meta";
.unary {
--a: #{meta.inspect(-(50px + 30px))};
--b: #{meta.inspect(-(10px - 15px))};
}5px.(-$n).Build padding and margin from a base size with operators and math.div.
@use "sass:math";
$base: 16px;
$space: $base * 1.5;
.card {
padding: $space;
margin-top: $space - 4px;
width: math.div(100%, 3);
}24px.4px.100% into thirds.Most numeric bugs are units, slash ambiguity, or hyphen spacing.
Literal 15px / 30px may stay slash-separated for CSS. See math.div().
Write 5px - 3px. For negation in a list, wrap: (-$n).
#{$n}px is a string. Use $n * 1px or unit-bearing variables. See interpolation.
50% ≠ 0.5. Convert with math.div($p, 100%) or $d * 100%.
Numeric operators are core SassScript; division prefers the math module.
| API | Status |
|---|---|
+ - * % | Supported with unit conversion |
math.div() | Dart Sass 1.33+ via @use "sass:math" |
/ as division | Deprecated — migrate to math.div |
| Complex units | Often emitted as calc() in modern Dart Sass |
Compile with the Dart Sass CLI.
#{$n}px.One line: do number math with + - * % and math.div(), keeping real units on your values.
Practical checklist:
1. @use "sass:math" when dividing
2. Use + - * % for everyday arithmetic
3. Space both sides of - when subtracting
4. Keep units on variables (or * 1px)
5. Expect calc() for some complex unitsConcatenate and work with quoted / unquoted strings.
8 people found this page helpful