Sass Numbers

What You’ll Learn

Sass numbers combine a numeric value with optional units. This page covers unit math, scientific notation, percentages vs decimals, precision, unit-clean habits, and five compiled examples.

What Are Sass Numbers?

Official docs: numbers in Sass have two components—the number itself and its units. In 16px, the number is 16 and the unit is px. Numbers can have no units, and they can have complex units built from multiplication and division.

Sass supports the same formats as CSS numbers, including scientific notation with e (for example 5.2e3). Because browser support for scientific notation has historically been uneven, Sass always compiles it to fully expanded numbers.

• Unitless: 100, 0.8
• Simple units: 16px, 1.5rem, 50%
• Complex units: px*px, px/s (useful in Sass math; not always valid plain CSS)
• No integer vs decimal split—math.div(5, 2) is 2.5

📝 Syntax

$count: 100;        // unitless
$opacity: 0.8;      // unitless decimal
$size: 16px;        // length
$ratio: 5px * 2px;  // complex unit (square pixels)

⚖️ How Units Work

Official docs: Sass manipulates units like real-world calculations. Multiply two numbers and their units multiply. Divide and the result takes numerator units from the first number and denominator units from the second.

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

.demo {
  --square: #{meta.inspect(4px * 6px)};           // 24px*px
  --speed: #{meta.inspect(math.div(5px, 2s))};    // 2.5px/s
  --cancel: #{meta.inspect(math.div(96px, 1in))}; // 1 (units cancel)
}

🔄 Compatible Units

Sass automatically converts between compatible units (CSS defines 1in as 96px). Which unit appears in the result can depend on the Sass implementation. Incompatible pairs such as 1in + 1s throw an error.

📈 Percentages vs Decimals

Official docs: percentages work like every other unit. They are not interchangeable with decimals, because in CSS 50% and 0.5 mean different things.

• Percent → decimal: math.div($percentage, 100%)
• Decimal → percent: $decimal * 100%
• Explicit helper: math.percentage($decimal) (same idea as * 100%)

🔢 Precision

Official docs: Sass numbers are 64-bit floating point values. About 10 digits after the decimal matter for CSS serialization and equality. Math functions still work with the full internal value when possible so rounding errors do not pile up as quickly.

@use "sass:meta";

.demo {
  --trimmed: #{meta.inspect(0.012345678912345)}; // 0.0123456789
}

✅ Stay Unit-Clean

Official docs: if arithmetic gives the wrong unit, check your math. Avoid interpolation like #{$number}px—that creates an unquoted string, not a number. Prefer $number * 1px or keep px on the variable from the start.

Examples Gallery

Examples use meta.inspect() when showing Sass-only number forms. Open View Compiled CSS for verified output.

@use "sass:meta";

.demo {
  --n1: #{meta.inspect(100)};
  --n2: #{meta.inspect(0.8)};
  --n3: #{meta.inspect(16px)};
  --n4: #{meta.inspect(5px * 2px)};
  --sci1: #{meta.inspect(5.2e3)};
  --sci2: #{meta.inspect(6e-2)};
}

.demo {
  --n1: 100;
  --n2: 0.8;
  --n3: 16px;
  --n4: 10px*px;
  --sci1: 5200;
  --sci2: 0.06;
}

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

.demo {
  --compat: #{meta.inspect(1in + 6px)};
  --pct-dec: #{meta.inspect(math.div(50%, 100%))};
  --dec-pct: #{meta.inspect(0.5 * 100%)};
  --pct-fn: #{meta.inspect(math.percentage(0.5))};
}

.demo {
  --compat: 1.0625in;
  --pct-dec: 0.5;
  --dec-pct: 50%;
  --pct-fn: 50%;
}

@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:meta";

$n: 16;

.unit-clean {
  width: $n * 1px;
}

.bad-string {
  --fake: #{$n}px;
  --type: #{meta.type-of(#{$n}px)};
}

.good-number {
  --real: #{meta.inspect($n * 1px)};
  --type: #{meta.type-of($n * 1px)};
}

.unit-clean {
  width: 16px;
}

.bad-string {
  --fake: 16px;
  --type: string;
}

.good-number {
  --real: 16px;
  --type: number;
}

@use "sass:meta";

.precision {
  --a: #{meta.inspect(0.012345678912345)};
  --b: #{meta.inspect(0.99999999991)};
  --c: #{meta.inspect(1.00000000009)};
}

.precision {
  --a: 0.0123456789;
  --b: 0.9999999999;
  --c: 1.0000000001;
}

🚀 Real-World Use Cases

• Spacing scales — multiply a step by 1rem or 1px.
• Duration from distance — ratio units that cancel to seconds.
• Opacity / progress — convert between % and unitless decimals.
• Responsive math — combine compatible absolute lengths safely.
• Design tokens — keep numbers typed so helpers stay unit-aware.

⚠️ Common Pitfalls

• Interpolation for units — #{$n}px is a string, not a number.
• Treating % like a decimal — 50% ≠ 0.5 in Sass.
• Incompatible units — 1in + 1s fails at compile time.
• Leaving complex units in CSS — cancel units or keep them Sass-only.
• Assuming integer division — Sass returns decimals like JavaScript.

💡 Best Practices