Sass math.hypot()

Definition and Usage

math.hypot($number...) returns the length of the n-dimensional vector whose components are the given numbers. For two sides that is the classic hypotenuse √(a² + b²); for three it is √(a² + b² + c²), and so on. Arguments must all have compatible units or all be unitless. The result takes the unit of the first number. Load it with @use "sass:math" on Dart Sass 1.25+.

Syntax

@use "sass:math";

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

math.hypot(3, 4); // 5

$lengths: 1in, 10cm, 50px;
math.hypot($lengths...); // 4.0952775683in

math.hypot(5px, 12px); // 13px
math.hypot(2, 3, 6);   // 7

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

Pattern: collect component lengths → call math.hypot (optionally with list spread ...) → emit a diagonal or distance token. Related: math.sqrt, math.pow, math.abs.

Units and Dimensions

How arguments and units behave:

Related Functions

Load with @use "sass:math". Previous: math.floor(). Next: math.is-unitless(). Also: math.sqrt(), math.pow(), math.abs(), math.compatible(), math.clamp().

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.hypot(3, 4); // 5

.basic {
  --a: #{math.hypot(3, 4)};
}

.basic {
  --a: 5;
}

@use "sass:math";

$lengths: 1in, 10cm, 50px;

@debug math.hypot($lengths...); // 4.0952775683in

.lengths {
  --b: #{math.hypot($lengths...)};
}

.lengths {
  --b: 4.0952775683in;
}

@use "sass:math";

.px {
  --two: #{math.hypot(5px, 12px)};
}

.px {
  --two: 13px;
}

@use "sass:math";

.three {
  --v: #{math.hypot(2, 3, 6)};
  --one: #{math.hypot(10px)};
}

.three {
  --v: 7;
  --one: 10px;
}

@use "sass:math";

$dx: 30px;
$dy: 40px;

.box {
  width: math.hypot($dx, $dy);
}

.box {
  width: 50px;
}

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 compatible components (or all unitless)
3. Put the desired result unit first
4. Spread lists with $lengths... when helpful
5. Expect a fixed CSS length at compile time