The Math Module
Use sass:math for division, rounding, min, max, and constants.
Syntax
@use 'sass:math'; math.div(10, 3)The built-in sass:math module provides mathematical functions. Load it with @use 'sass:math'.
Handy functions
math.div($a, $b)— division (the modern replacement for/).math.round(),math.ceil(),math.floor()— rounding.math.min(),math.max(),math.abs().math.percentage()— turn a fraction into a percentage.math.$pi— the constant pi.
Example
@use 'sass:math';
.grid {
width: math.percentage(math.div(3, 12)); // 25%
}
.badge {
size: math.round(15.7px); // 16px
gap: math.max(8px, 12px); // 12px
}When to use it
- A grid system uses math.div() for all division operations to avoid the deprecated slash syntax that causes compiler warnings in Dart Sass.
- A spacing scale generator uses math.pow() to apply an exponential ratio and math.round() to snap values to the nearest pixel for crisp rendering.
- A developer uses math.clamp() to constrain a computed font size between minimum and maximum limits without writing a verbose CSS clamp() string.
More examples
Safe division with math.div
Uses math.div() (not /) and math.percentage() to compute correct column widths without triggering Dart Sass deprecation warnings.
@use 'sass:math';
$grid-cols: 12;
@for $i from 1 through $grid-cols {
.col-#{$i} {
width: math.percentage(math.div($i, $grid-cols));
}
}Rounding computed values
Applies a modular scale ratio using math.pow() and snaps each value to a whole pixel with math.round() to avoid subpixel rendering.
@use 'sass:math';
$base: 16px;
$ratio: 1.25;
$scale: (
sm: math.round($base * math.pow($ratio, -1)),
md: $base,
lg: math.round($base * math.pow($ratio, 1)),
xl: math.round($base * math.pow($ratio, 2))
);Math constants and functions
Uses math.$pi and multiplication to compute SVG circle stroke-dasharray values for a 25% progress ring at compile time.
@use 'sass:math';
.circle-progress {
// Full circumference for r=40
$r: 40;
stroke-dasharray: math.round(2 * math.$pi * $r);
stroke-dashoffset: math.round(2 * math.$pi * $r * 0.25); // 25%
}
Discussion