Sass math.max() Function

What You’ll Learn

math.max() is a bounding helper in the sass:math module. It returns the highest of one or more numbers and keeps compatible CSS units. You will learn module loading, list spreading with ..., how it differs from CSS max(), and five compiled examples.

What Is math.max()?

math.max() compares its arguments and returns the largest one. That is useful when several tokens or calculations compete and you want the winner baked into CSS.

• math.max(1px, 4px) → 4px
• math.max(50px, 30px, 100px) → 100px
• math.max($widths...) → highest item in the list

Pair it with math.min() when you need the smallest value, or with math.clamp() when you need both a floor and a ceiling around one preferred number.

📝 Syntax

Load the math module, then pass one or more numbers:

@use "sass:math";

math.max($number...)
// also: math.max($list...)

Parameters

Return value

📦 Loading sass:math

// Recommended — namespaced
@use "sass:math";
$w: math.max(12px, 24px);

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

// Optional — custom namespace
@use "sass:math" as m;
$w: m.max(12px, 24px);

📏 How Units Work

Arguments must be comparable. Compatible absolute lengths can mix; relative vs absolute often cannot.

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a plain number unless you wrote CSS max() yourself.

Examples Gallery

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

@use "sass:math";

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

.box {
  border-width: math.max(1px, 4px);
}

.box {
  border-width: 4px;
}

@use "sass:math";

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

.hero {
  max-width: math.max($widths...);
}

.hero {
  max-width: 100px;
}

@use "sass:math";

$computed: 48px;
$floor: 64px;

.button {
  min-width: math.max($computed, $floor);
}

.button {
  min-width: 64px;
}

@use "sass:math";

$space-sm: 8px;
$space-md: 16px;
$space-lg: 24px;

.section {
  gap: math.max($space-sm, $space-md, $space-lg);
}

.section {
  gap: 24px;
}

@use "sass:math";

$sizes: 12px, 40px, 24px;

.card {
  padding: math.min($sizes...);
  margin-block: math.max($sizes...);
}

.card {
  padding: 12px;
  margin-block: 40px;
}

🚀 Real-World Use Cases

• Token selection — pick the largest spacing, radius, or type size from a set.
• Minimum floors — math.max($computed, $floor) so sizes never go too small.
• Map / list pipelines — spread generated lists of lengths and take the peak.
• Border and stroke — ensure a visible minimum thickness.
• Paired with min — report both ends of a scale for padding vs margin.
• Fixed vs fluid — use Sass max for known numbers; CSS max for viewport math.

⚠️ Common Pitfalls

• Forgetting @use — math.max needs sass:math loaded.
• Incompatible units — px vs em fails; keep a shared family.
• Expecting fluid CSS — Sass max cannot mix vw the way CSS max can.
• Confusing with clamp — max picks a winner among candidates; clamp bounds one preferred value.
• LibSass pipelines — prefer Dart Sass for the module API.

💡 Best Practices