Sass math.div() Function

What You’ll Learn

math.div() is the modern division helper in the sass:math module. It replaces ambiguous slash / division, cancels shared units, and runs at compile time. This page covers unit rules, Dart Sass 1.33+, migration from /, and five compiled examples.

What Is math.div()?

Division asks “how many times does this fit into that?” math.div($number1, $number2) returns that quotient at compile time. Official docs place it under Other Functions and document it as the clear alternative to slash / division.

• math.div(1, 2) → 0.5
• math.div(100px, 5px) → 20 (units cancel)
• math.div(100px, 5) → 20px (length kept)
• math.div(100px, 5s) → 20px/s (compound unit)

📝 Syntax

Load the math module, then call the function:

@use "sass:math";

math.div($number1, $number2)

Parameters

Return value

📦 Loading sass:math

math.div() lives on the module API—load sass:math with @use. There is no separate “global div()” documented the way older helpers like abs() still expose.

// Recommended — namespaced
@use "sass:math";
$ratio: math.div(24px, 16px);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$ratio: div(24px, 16px);

// Optional — custom namespace
@use "sass:math" as m;
$ratio: m.div(24px, 16px);

📏 How Units Work

Official docs describe the rules clearly: shared units cancel. Leftover units from the first argument stay in the numerator; leftover units from the second move into the denominator.

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a plain number (or length)—no math.div() call remains.

Examples Gallery

Each example uses @use "sass:math". Open View Compiled CSS to see what Dart Sass emits.

@use "sass:math";

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

.fade {
  opacity: math.div(1, 2);
}

.fade {
  opacity: 0.5;
}

@use "sass:math";

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

.meter {
  --ratio: #{math.div(100px, 5px)};
  opacity: math.div(40px, 100px);
}

.meter {
  --ratio: 20;
  opacity: 0.4;
}

@use "sass:math";

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

.card {
  width: math.div(100px, 5);
  padding: math.div(32px, 2);
}

.card {
  width: 20px;
  padding: 16px;
}

@use "sass:math";

$base: 16px;
$step: 24px;
$ratio: math.div($step, $base); // 1.5

.title {
  font-size: $base * $ratio; // 24px
}

.caption {
  font-size: math.div($base, $ratio); // ~10.666px
  letter-spacing: math.div(1px, 16);  // 0.0625px
}

.title {
  font-size: 24px;
}

.caption {
  font-size: 10.6666666667px;
  letter-spacing: 0.0625px;
}

@use "sass:math";

// Old (division with / is deprecated)
// $half: 48px / 2;
// $ratio: 24px / 16px;

// Modern
$half: math.div(48px, 2);
$ratio: math.div(24px, 16px);

.box {
  width: $half;
  opacity: math.div($ratio, 2); // 0.75
}

.box {
  width: 24px;
  opacity: 0.75;
}

🚀 Real-World Use Cases

• Opacity and ratios — cancel matching units into unitless 0–1 values.
• Type and spacing scales — derive steps from a base length.
• Responsive math tokens — compute fixed halves, thirds, and gutters at compile time.
• Migrating legacy SCSS — replace deprecated / division across a codebase.
• Percentage helpers — feed unitless ratios into math.percentage().
• Pre-log / pre-pow cleanup — strip units with matching division before unitless-only helpers.

⚠️ Common Pitfalls

• Still using / for division — migrate to math.div().
• Emitting compound units into CSS — px/s is not a valid length property value.
• Dividing by zero — guard divisors in mixins and maps.
• String slash tricks — do not use math.div to concatenate strings; that legacy behavior is going away.
• Old Dart Sass — need 1.33+ for documented math.div.

💡 Best Practices