Sass math.percentage()

Definition and Usage

math.percentage($number) converts a unitless number (usually a decimal between 0 and 1) into a CSS percentage. Official docs note it is identical to $number * 100%. Load it with @use "sass:math" (Dart Sass 1.23+ for modules; global percentage() also exists).

Syntax

@use "sass:math";

math.percentage($number); //=> percentage

math.percentage(0.2); // 20%
math.percentage(math.div(100px, 50px)); // 200%

// Identical form from the official docs
0.2 * 100%; // 20%

// Global name (legacy / deprecated in modern Dart Sass)
percentage(0.2); // 20%

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

Pattern: build a unitless ratio → math.percentage → emit a CSS % for widths, columns, or progress tokens.

Decimals and Ratios

Common conversions:

Related Functions

Load with @use "sass:math". Previous: math.min(). Next: math.pow(). Also: math.div(), math.is-unitless(), math.clamp(), math.round().

SCSS Examples

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

@use "sass:math";

@debug math.percentage(0.2); // 20%

.basic {
  --a: #{math.percentage(0.2)};
}

.basic {
  --a: 20%;
}

@use "sass:math";

@debug math.percentage(math.div(100px, 50px)); // 200%

.div {
  --b: #{math.percentage(math.div(100px, 50px))};
}

.div {
  --b: 200%;
}

@use "sass:math";

.identical {
  --fn: #{math.percentage(0.2)};
  --mult: #{0.2 * 100%};
}

.identical {
  --fn: 20%;
  --mult: 20%;
}

@use "sass:math";

.range {
  --half: #{math.percentage(0.5)};
  --one: #{math.percentage(1)};
}

.range {
  --half: 50%;
  --one: 100%;
}

@use "sass:math";

$ratio: math.div(3, 4);

.box {
  width: math.percentage($ratio);
  opacity: 0.75; // unitless ratio stays unitless
}

.box {
  width: 75%;
  opacity: 0.75;
}

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. Start from a unitless number (or math.div to cancel units)
3. Call math.percentage($number) — or use $number * 100%
4. Prefer math.percentage over global percentage()
5. Keep opacity/ratios unitless; do not wrap them