Sass math.hypot() Function

What You’ll Learn

math.hypot() is a distance helper in the sass:math module. It returns the length of an n-dimensional vector from its components. With two sides of a right triangle, that length is the hypotenuse. You will learn unit rules, Dart Sass 1.25+ notes, list spreading, and five compiled examples.

What Is math.hypot()?

Imagine each argument as one side of a multi-dimensional arrow. math.hypot() returns how long that arrow is. For two numbers a and b, it is the familiar Pythagorean result:

• math.hypot(3, 4) → 5 (because 3² + 4² = 25, and √25 = 5)
• Three or more arguments extend the same idea: √(a² + b² + c² + …)
• With lengths that have units, Sass converts compatible units and returns the first argument’s unit

It sits next to math.abs() under distance functions: abs is 1D distance from zero; hypot is multi-dimensional distance from the origin.

📝 Syntax

Load the math module, then pass one or more numbers:

@use "sass:math";

math.hypot($number...)
// also: math.hypot($list...)

Parameters

Return value

📦 Loading sass:math

// Recommended — namespaced
@use "sass:math";
$d: math.hypot(3, 4);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$d: hypot(3, 4);

// Optional — custom namespace
@use "sass:math" as m;
$d: m.hypot(3, 4);

📏 How Units Work

Compatible absolute lengths can mix. The output unit matches the first number.

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a plain number.

Examples Gallery

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

@use "sass:math";

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

.line {
  // illustrative custom property
  --len: #{math.hypot(3, 4)};
  width: math.hypot(3px, 4px);
}

.line {
  --len: 5;
  width: 5px;
}

@use "sass:math";

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

.box {
  // use the computed distance as a max size
  max-width: math.hypot($lengths...);
}

.box {
  max-width: 4.0952775683in;
}

@use "sass:math";

$card-w: 320px;
$card-h: 180px;

.card-diagonal {
  width: math.hypot($card-w, $card-h);
}

.card-diagonal {
  width: 367.15282867px;
}

@use "sass:math";

$x: 6px;
$y: 8px;
$reach: math.hypot($x, $y); // 10px

.elevated {
  box-shadow: #{$x} #{$y} #{$reach} rgba(0, 0, 0, 0.2);
}

.elevated {
  box-shadow: 6px 8px 10px rgba(0, 0, 0, 0.2);
}

@use "sass:math";

// √(2² + 3² + 6²) = √(4+9+36) = √49 = 7
$depth: math.hypot(2, 3, 6);

.space {
  --depth: #{$depth};
  letter-spacing: math.hypot(0.02em, 0.01em); // unitless-like em family
}

.space {
  --depth: 7;
  letter-spacing: 0.0223606798em;
}

🚀 Real-World Use Cases

• Diagonals — size ribbons, strokes, or loaders from known width and height.
• Offset reach — turn x/y shadow or translate pairs into one distance.
• Icon geometry — derive stroke lengths from component offsets in a design system.
• Multi-axis tokens — combine several fixed spacing axes into one magnitude.
• Teaching distance — show how abs (1D) relates to hypot (nD) in sass:math.
• Fixed vs measured — use Sass when sides are known; use JS when you measure the DOM.

⚠️ Common Pitfalls

• Forgetting @use — math.hypot needs sass:math loaded.
• Incompatible units — px with em fails; keep a compatible family.
• Surprised by output unit — the first argument decides the result unit.
• Expecting fluid layout math — hypot cannot resolve live viewport or measured element sizes.
• Old Dart Sass — need 1.25+; LibSass lacks the module API.

💡 Best Practices