Sass math.sqrt() Function

What You’ll Learn

math.sqrt() is an exponential helper in the sass:math module. It returns the square root of a unitless number. You will learn unit rules, NaN behavior, comparisons with math.pow and math.hypot, Dart Sass 1.25+ notes, and five compiled examples.

What Is math.sqrt()?

A square root answers: what number, multiplied by itself, gives this value? In Sass:

• math.sqrt(100) → 10 (because 10 × 10 = 100)
• math.sqrt(math.div(1, 3)) → about 0.5773502692
• math.sqrt(-1) → NaN (no real square root)

Official docs group it with math.pow() and math.log() under Exponential Functions. It is the readable form of math.pow($n, 0.5).

📝 Syntax

Load the math module, then pass a unitless number:

@use "sass:math";

math.sqrt($number)
// $number must be unitless

Parameters

Return value

📦 Loading sass:math

// Recommended — namespaced
@use "sass:math";
$r: math.sqrt(100);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$r: sqrt(100);

// Optional — custom namespace
@use "sass:math" as m;
$r: m.sqrt(100);

📏 How Units Work

Like math.pow() and math.log(), math.sqrt() accepts only unitless numbers. Use ratios for length math, or multiply the root by a length.

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a plain number (or NaN if the input was negative).

Examples Gallery

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

@use "sass:math";

@debug math.sqrt(100); // 10

.demo {
  --root-100: #{math.sqrt(100)};
  --root-81: #{math.sqrt(81)};
}

.demo {
  --root-100: 10;
  --root-81: 9;
}

@use "sass:math";

@debug math.sqrt(math.div(1, 3)); // ~0.5773502692

.ratio {
  --sqrt-one-third: #{math.sqrt(math.div(1, 3))};
  // same idea via pow
  --also: #{math.pow(math.div(1, 3), 0.5)};
}

.ratio {
  --sqrt-one-third: 0.5773502692;
  --also: 0.5773502692;
}

@use "sass:math";

@debug math.sqrt(-1); // NaN

.guard {
  // illustrative — prefer non-negative inputs in real UI tokens
  --bad-root: #{math.sqrt(-1)};
  --safe-root: #{math.sqrt(math.abs(-9))}; // 3
}

.guard {
  --bad-root: NaN;
  --safe-root: 3;
}

@use "sass:math";

$side: 120px;
$diagonal: $side * math.sqrt(2);

.tile-stroke {
  width: $diagonal;
  --sqrt-2: #{math.sqrt(2)};
}

.tile-stroke {
  width: 169.70562748px;
  --sqrt-2: 1.4142135624;
}

@use "sass:math";

$a: 3;
$b: 4;

$manual: math.sqrt($a * $a + $b * $b); // 5
$built-in: math.hypot($a, $b);          // 5

.line {
  --manual: #{$manual};
  --hypot: #{$built-in};
  width: math.hypot(3px, 4px); // hypot keeps units
}

.line {
  --manual: 5;
  --hypot: 5;
  width: 5px;
}

🚀 Real-World Use Cases

• Diagonal factors — size strokes or ribbons with $side * math.sqrt(2).
• Geometry tokens — store √2, √3, and other constants as custom properties.
• Area → side — recover a side length from a known square area (unitless ratio first).
• Teaching roots — show how sqrt relates to math.pow($n, 0.5).
• Safe magnitudes — pair with math.abs before sqrt when inputs may be signed.
• Hypot fallback — understand √(a²+b²) before switching to math.hypot.

⚠️ Common Pitfalls

• Passing px / rem — math.sqrt needs unitless values; use ratios or multiply after.
• Forgetting @use — math.sqrt needs sass:math loaded.
• Negative roots — you get NaN, not an error; guard with math.abs when needed.
• Reinventing hypot — for multi-component lengths with units, prefer math.hypot.
• Old Dart Sass — need 1.25+; LibSass lacks the module API.

💡 Best Practices