Sass math.min() Function

What You’ll Learn

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

What Is math.min()?

math.min() compares its arguments and returns the smallest one. That is useful when several tokens or calculations compete and you want the tightest value baked into CSS.

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

Pair it with math.max() when you need the largest 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.min($number...)
// also: math.min($list...)

Parameters

Return value

📦 Loading sass:math

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

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

// Optional — custom namespace
@use "sass:math" as m;
$w: m.min(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 min() yourself.

Examples Gallery

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

@use "sass:math";

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

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

.box {
  border-width: 1px;
}

@use "sass:math";

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

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

.hero {
  min-width: 30px;
}

@use "sass:math";

$computed: 96px;
$ceiling: 64px;

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

.button {
  max-width: 64px;
}

@use "sass:math";

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

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

.toolbar {
  gap: 8px;
}

@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 smallest spacing, radius, or type size from a set.
• Maximum caps — math.min($computed, $ceiling) so sizes never grow too large.
• Map / list pipelines — spread generated lists of lengths and take the trough.
• Dense UI — choose the tightest gap that still matches your scale.
• Paired with max — report both ends of a scale for padding vs margin.
• Fixed vs fluid — use Sass min for known numbers; CSS min for viewport math.

⚠️ Common Pitfalls

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

💡 Best Practices