Sass math.clamp()

Definition and Usage

math.clamp($min, $number, $max) restricts $number to the range between $min and $max. Below the floor it returns $min; above the ceiling it returns $max; otherwise it returns $number. All three must have compatible units or all be unitless. Load it with @use "sass:math" on Dart Sass 1.25+.

Syntax

@use "sass:math";

math.clamp($min, $number, $max); //=> number

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

// Compatible absolute lengths convert; relative mixes fail
// math.clamp(1px, 1em, 2px); // error

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

Pattern: choose bounds → pass the preferred value in the middle → emit a safe length or count. Pair with math.min / math.max when you only need one side of the range.

Bounds and Units

How the middle argument is forced into range:

Related Functions

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

SCSS Examples

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

@use "sass:math";

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

.basic {
  --a: #{math.clamp(-1, 0, 1)};
}

.basic {
  --a: 0;
}

@use "sass:math";

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

.units {
  --b: #{math.clamp(1px, -1px, 10px)};
}

.units {
  --b: 1px;
}

@use "sass:math";

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

.convert {
  --c: #{math.clamp(-1in, 1cm, 10mm)};
}

.convert {
  --c: 10mm;
}

@use "sass:math";

.bounds {
  --low: #{math.clamp(10px, 5px, 20px)};
  --mid: #{math.clamp(10px, 15px, 20px)};
  --high: #{math.clamp(10px, 25px, 20px)};
}

.bounds {
  --low: 10px;
  --mid: 15px;
  --high: 20px;
}

@use "sass:math";

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

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

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

Sass Support

Prefer the module form with Dart Sass 1.25+.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. @use "sass:math"
2. Pass min, preferred number, max (compatible units)
3. Expect a fixed value inside the range
4. Use CSS clamp() for viewport/fluid values
5. Check math.compatible when units differ