Sass math.min()

Definition and Usage

math.min($number...) returns the lowest 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 min() also exists).

Syntax

@use "sass:math";

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

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

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

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

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

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

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

Units and Lists

How arguments behave:

Related Functions

Load with @use "sass:math". Previous: math.max(). Next: math.percentage(). 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.min(1px, 4px); // 1px

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

.basic {
  --a: 1px;
}

@use "sass:math";

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

@debug math.min($widths...); // 30px

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

.spread {
  --b: 30px;
}

@use "sass:math";

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

.unitless {
  --n: 1;
}

@use "sass:math";

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

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

@use "sass:math";

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

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

.box {
  width: 12px;
  font-size: 0.875rem;
}

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 lowest value with its units
4. Prefer math.min over bare min() in new code
5. Use CSS min() when values must stay fluid