The sass:math Module and Division

One of the most significant breaking changes in modern SASS is the deprecation of `/` as a division operator. Because CSS uses `/` for list separators in values like `font: 16px/1.5` and `border-radius: 10px / 20px`, SASS can no longer reliably distinguish between division and a CSS separator. The solution is `sass:math` — import it with `@use "sass:math"` and use `math.div($a, $b)` for all division. The `sass:math` module includes a complete set of numeric functions: `math.round()`, `math.ceil()`, `math.floor()`, `math.abs()`, `math.min()`, `math.max()`, `math.clamp()`, `math.pow()`, `math.sqrt()`, `math.log()`, `math.cos()`, `math.sin()`, `math.tan()`, and trigonometric inverses. It also exposes constants `math.$pi` and `math.$e`. Unit handling in `sass:math` is precise. `math.is-unitless()` tests whether a number has no unit. `math.unit()` returns the unit as a string. `math.compatible()` checks whether two numbers can be added (share compatible units). When working with design systems that mix px, rem, em, and unitless values, these utilities help write robust functions that validate their inputs.

Example

// ── sass:math module ──────────────────────────────────────────────────────────

@use 'sass:math';

// ── math.div() replaces / for division ────────────────────────────────────────

// Old (deprecated, triggers warning):
// $half: 100px / 2;

// Modern:
$half      : math.div(100px, 2);          // 50px
$column    : math.percentage(math.div(4, 12));  // 33.333%
$line-height: math.div(24px, 16px);       // 1.5 (unitless ratio)

// ── math.pow for exponential scales ──────────────────────────────────────────

$type-scale-ratio : 1.25;  // Major Third
$base-size        : 1rem;

@for $i from -2 through 6 {
    $level: if($i >= 0, $i + 1, $i);
    .text-scale-#{$level} {
        font-size: $base-size * math.pow($type-scale-ratio, $i);
    }
}

// ── Trigonometry for creative CSS ────────────────────────────────────────────

// Generate polygon points using sin/cos
@function polygon-points($n, $r: 50%) {
    $points: '';
    @for $i from 0 through $n - 1 {
        $angle : math.div(2 * math.$pi * $i, $n) - math.div(math.$pi, 2);
        $x     : 50% + $r * math.cos($angle);
        $y     : 50% + $r * math.sin($angle);
        $points: $points + '#{$x} #{$y}';
        @if $i < $n - 1 { $points: $points + ', '; }
    }
    @return $points;
}

// ── Unit checking in functions ────────────────────────────────────────────────

@function strip-unit($number) {
    @if not math.is-unitless($number) {
        @return math.div($number, $number * 0 + 1);
    }
    @return $number;
}

@function to-rem($px, $base: 16px) {
    @return math.div(strip-unit($px), strip-unit($base)) * 1rem;
}

h1 { font-size: to-rem(36px); }   // 2.25rem
h2 { font-size: to-rem(28px); }   // 1.75rem

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned