Sass math.unit()

Definition and Usage

math.unit($number) returns a quoted string describing $number’s units. Unitless values return "". Load it with @use "sass:math" on Dart Sass 1.23+.

Syntax

@use "sass:math";

math.unit($number); //=> quoted string

math.unit(100);                 // ""
math.unit(100px);               // "px"
math.unit(5px * 10px);          // "px*px"
math.unit(math.div(5px, 1s));   // "px/s"

// Global alias (legacy): unit($number)
// Prefer math.unit after @use "sass:math"

Pattern: inspect a value while debugging → read the unit string → fix mismatches with math.compatible or math.div.

Unit Strings

How common numbers look:

Related Functions

Load with @use "sass:math". Previous: math.tan(). Next: color.adjust(). Also: math.is-unitless(), math.compatible(), math.div(), math.abs().

SCSS Examples

Examples target Dart Sass with @use "sass:math". Official samples use @debug; examples emit via content so View Compiled CSS shows the quoted strings.

@use "sass:math";

@debug math.unit(100); // ""

.basic {
  content: math.unit(100);
}

.basic {
  content: "";
}

@use "sass:math";

@debug math.unit(100px); // "px"

.simple {
  content: math.unit(100px);
}

.simple {
  content: "px";
}

@use "sass:math";

@debug math.unit(5px * 10px); // "px*px"

.compound {
  content: math.unit(5px * 10px);
}

.compound {
  content: "px*px";
}

@use "sass:math";

@debug math.unit(math.div(5px, 1s)); // "px/s"

.rate {
  content: math.unit(math.div(5px, 1s));
}

.rate {
  content: "px/s";
}

@use "sass:math";

$value: 16rem;

.guard {
  --unitless: #{math.is-unitless($value)};
  content: math.unit($value);
}

.guard {
  --unitless: false;
  content: "rem";
}

Sass Support

Prefer the module form with Dart Sass 1.23+.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. @use "sass:math"
2. Call math.unit($number) while debugging
3. Expect a quoted string ("" if unitless)
4. Do not depend on the exact format in production
5. Prefer is-unitless / compatible for logic