Sass math.div()

Definition and Usage

math.div($number1, $number2) divides the first number by the second. Shared units cancel. Units only in the first stay in the numerator; units only in the second move to the denominator. Prefer it over slash / division. Load it with @use "sass:math" on Dart Sass 1.33+.

Syntax

@use "sass:math";

math.div($number1, $number2); //=> number

math.div(1, 2);         // 0.5
math.div(100px, 5px);   // 20      (px cancels)
math.div(100px, 5);     // 20px
math.div(100px, 5s);    // complex unit (often calc() today)

// Prefer math.div over deprecated slash division:
// $x: 100px / 5px;  // avoid

// Module API — prefer math.div after @use "sass:math"

Pattern: divide two Sass numbers → let shared units cancel → use the unitless result as a ratio, or keep leftover units as a CSS length/rate.

Units After Division

How units move through math.div:

Related Functions

Load with @use "sass:math". Previous: math.cos(). Next: math.floor(). Also: math.percentage(), list.slash(), math.compatible(), math.unit(), math.clamp().

SCSS Examples

Examples target Dart Sass 1.33+ with @use "sass:math". Open View Compiled CSS for verified output (aligned with official Sass docs).

@use "sass:math";

@debug math.div(1, 2); // 0.5

.basic {
  --a: #{math.div(1, 2)};
}

.basic {
  --a: 0.5;
}

@use "sass:math";

@debug math.div(100px, 5px); // 20

.cancel {
  --b: #{math.div(100px, 5px)};
}

.cancel {
  --b: 20;
}

@use "sass:math";

@debug math.div(100px, 5); // 20px

.keep {
  --c: #{math.div(100px, 5)};
}

.keep {
  --c: 20px;
}

@use "sass:math";

@debug math.div(100px, 5s); // docs: 20px/s

.complex {
  --d: #{math.div(100px, 5s)};
}

.complex {
  --d: calc(20px / 1s);
}

@use "sass:math";

$w: 320px;
$col: 4;

.slash {
  font: 16px / 1.5 sans-serif; // CSS separator, not math.div
  line-height: math.div(24px, 16px);
}

.grid {
  width: math.div($w, $col);
}

.slash {
  font: 16px/1.5 sans-serif;
  line-height: 1.5;
}

.grid {
  width: 80px;
}

Sass Support

Prefer the module form with Dart Sass 1.33+.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. @use "sass:math"
2. Call math.div($a, $b) instead of $a / $b
3. Expect shared units to cancel
4. Keep CSS slash lists separate (font, list.slash)
5. Check compiled CSS for complex units (may be calc())