Sass math.clamp() Function

What You’ll Learn

math.clamp() is a bounding helper in the sass:math module. It forces a value to stay between a minimum and a maximum. You will learn the three-argument order, unit rules, Dart Sass requirements, how it differs from CSS clamp(), and five compiled examples.

What Is math.clamp()?

Clamping means “keep this number inside a safe range.” If the value is too low, use the minimum. If it is too high, use the maximum. Otherwise keep the value as-is.

• math.clamp(-1, 0, 1) → 0 (inside the range)
• math.clamp(1px, -1px, 10px) → 1px (raised to the min)
• math.clamp(-1in, 1cm, 10mm) → 10mm (capped at the max)

Use it for design tokens, opacity-like scales, spacing that must stay between two bounds, or any compile-time number that should never leave a corridor.

📝 Syntax

Load the math module, then call the function:

@use "sass:math";

math.clamp($min, $number, $max)

Parameters

All three arguments must have compatible units, or all be unitless.

Return value

📦 Loading sass:math

math.clamp() lives only on the module API in modern Sass docs—load sass:math with @use.

// Recommended — namespaced
@use "sass:math";
$size: math.clamp(12px, 18px, 24px);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$size: clamp(12px, 18px, 24px); // math module member

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

📏 How Units Work

Compatible units can be mixed (Sass converts as needed). Incompatible units fail at compile time.

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a plain number—no clamp() call remains unless you wrote CSS clamp yourself.

Examples Gallery

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

@use "sass:math";

@debug math.clamp(-1, 0, 1); // 0

.meter {
  opacity: math.clamp(0, 0.65, 1);
}

.meter {
  opacity: 0.65;
}

@use "sass:math";

@debug math.clamp(1px, -1px, 10px);   // 1px
@debug math.clamp(-1in, 1cm, 10mm); // 10mm

.box {
  // preferred -1px is below min 1px → 1px
  border-width: math.clamp(1px, -1px, 10px);
}

.box {
  border-width: 1px;
}

@use "sass:math";

$computed: 4px;
$min: 12px;
$max: 48px;

.icon {
  width: math.clamp($min, $computed, $max);
  height: math.clamp($min, $computed, $max);
}

.icon {
  width: 12px;
  height: 12px;
}

@use "sass:math";

$gap: 40px;

.section {
  padding-block: math.clamp(8px, $gap, 24px);
}

.section {
  padding-block: 24px;
}

@use "sass:math";

$radius-raw: 18px;
$radius: math.clamp(4px, $radius-raw, 16px);

.card {
  border-radius: $radius;
}

.chip {
  border-radius: math.clamp(4px, $radius-raw * 0.25, 16px);
}

.card {
  border-radius: 16px;
}

.chip {
  border-radius: 4.5px;
}

🚀 Real-World Use Cases

• Design tokens — keep radius, gap, or font-size numbers inside brand limits.
• Opacity / scales — clamp unitless ratios between 0 and 1 (or 0 and 100).
• Icon and avatar sizes — never smaller than a floor or larger than a ceiling.
• Generated maps — after loops or maps, clamp each value before emit.
• Safer theming — accept user-provided numbers but pin them to a corridor.
• Fixed vs fluid — use Sass clamp for known numbers; CSS clamp for viewport fluid type.

⚠️ Common Pitfalls

• Wrong argument order — it is min, preferred, max—not preferred first.
• Incompatible units — mixing px with em fails; keep a shared unit family.
• Min greater than max — keep $min ≤ $max or results become confusing.
• Expecting fluid CSS — Sass clamp cannot use vw the way CSS clamp can.
• Old Dart Sass — need 1.25+ for math.clamp; LibSass lacks the module.

💡 Best Practices