A Sass number has two parts: the numeric value and optional units (for example 16px). Numbers can also be unitless.
Multiply and divide units the way physics does—px * px is square pixels; math.div(5px, 2s) is pixels per second.
Prefer $n * 1px over #{$n}px. Interpolation makes a string, not a number.
Percentages are a unit. Convert with math.div($pct, 100%) or $dec * 100%.
@use "sass:math";
100; // unitless
16px; // value + unit
5.2e3; // scientific → 5200
4px * 6px; // complex units → calc(...)
math.div(5px, 2s); // px / s
1in + 6px; // compatible → converts
math.div(50%, 100%); // 0.5
0.5 * 100%; // 50%
$size * 1px; // attach a unit safelyPattern: write a number (with units if needed) → do math with matching / compatible units → use math.div for division.
Everyday number ideas:
| Pattern | Result idea |
|---|---|
16px / 100 | Number with units, or unitless |
5.2e3 | Scientific notation (emits expanded form) |
math.div($a, $b) | Division (preferred over /) |
1in + 6px | Compatible units convert automatically |
1in + 1s | Incompatible → compile error |
$n * 1px | Attach a unit without making a string |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Unitless, decimals, units, and scientific notation.
.demo {
--int: #{100};
--dec: #{0.8};
--px: #{16px};
--sci: #{5.2e3};
--sci2: #{6e-2};
}Multiply/divide units; convert compatible lengths.
@use "sass:math";
.demo {
--sq: #{4px * 6px};
--rate: #{math.div(5px, 2s)};
--sum: #{1in + 6px};
}calc().A seconds-per-pixel ratio times a distance cancels to time.
@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);
}2.2s.50% is not equal to 0.5—convert explicitly.
@use "sass:math";
$pct: 50%;
$dec: 0.5;
.demo {
--same: #{$pct == $dec};
--to-dec: #{math.div($pct, 100%)};
--to-pct: #{$dec * 100%};
--via-fn: #{math.percentage($dec)};
}false.math.percentage() yields a percent.Multiply by 1px instead of interpolating a fake number.
@use "sass:math";
$size: 16;
.box {
width: $size * 1px;
height: $size * 1px;
margin: math.div(24px, 2);
}#{$size}px (that is a string).Most number bugs are stringified units or mixing incompatible units.
#{$n}px is a string. Use $n * 1px or store the unit on the variable. See interpolation.
Convert explicitly with unit arithmetic or math.percentage().
Slash has other meanings in CSS. Details on math.div() and numeric operators.
That is usually a real math bug—fix the units rather than stripping them.
Numbers and unit math are core Sass on Dart Sass.
| Feature | Status |
|---|---|
| Numbers with units | Supported |
Complex units as calc() | Dart Sass (CSS emission; fuller support since 1.96) |
| ~10 digit CSS precision | Dart Sass default |
sass:math helpers | Supported |
Compile with the Dart Sass CLI.
#{$n}px.One line: keep numbers unit-clean so Sass can convert, cancel, and catch bad math for you.
Practical checklist:
1. Give quantities the units they mean
2. Use math.div for division
3. Convert % ↔ decimals explicitly
4. Attach units with $n * 1px (not #{$n}px)
5. Let incompatible-unit errors guide your mathLearn quoted vs unquoted strings and when interpolation helps.
8 people found this page helpful