Sass math.max()

Definition and Usage

math.max($number...) returns the highest of one or more numbers. Arguments must have compatible units or all be unitless. Units on the winning value are kept. Load it with @use "sass:math" (Dart Sass 1.23+ for modules; global max() also exists).

Syntax

@use "sass:math";

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

math.max(1px, 4px); // 4px

$widths: 50px, 30px, 100px;
math.max($widths...); // 100px

math.max(3, 9, 1); // 9

// Global name (legacy)
max(1px, 4px); // 4px

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

Pattern: collect comparable tokens → call math.max (optionally with list spread) → emit the winning length. Pair with math.min and math.clamp.

Units and Lists

How arguments behave:

Related Functions

Load with @use "sass:math". Previous: math.log(). Next: math.min(). Also: math.clamp(), math.compatible(), math.abs(), math.ceil(), math.floor().

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.max(1px, 4px); // 4px

.basic {
  --a: #{math.max(1px, 4px)};
}

.basic {
  --a: 4px;
}

@use "sass:math";

$widths: 50px, 30px, 100px;

@debug math.max($widths...); // 100px

.spread {
  --b: #{math.max($widths...)};
}

.spread {
  --b: 100px;
}

@use "sass:math";

.unitless {
  --n: #{math.max(3, 9, 1)};
}

.unitless {
  --n: 9;
}

@use "sass:math";

.neg {
  --n: #{math.max(-2px, -8px, -1px)};
}

.neg {
  --n: -1px;
}

@use "sass:math";

$min: 12px;
$preferred: 18px;

.box {
  width: math.max($min, $preferred);
  font-size: math.max(0.875rem, 1rem);
}

.box {
  width: 18px;
  font-size: 1rem;
}

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. Pass comparable numbers (or spread a list)
3. Expect the highest value with its units
4. Prefer math.max over bare max() in new code
5. Use CSS max() when values must stay fluid