Sass math.sqrt()

Definition and Usage

math.sqrt($number) returns the square root of $number. The argument must be unitless. Negative inputs return NaN. Load it with @use "sass:math" on Dart Sass 1.25+.

Syntax

@use "sass:math";

math.sqrt($number); //=> unitless number

math.sqrt(100);              // 10
math.sqrt(math.div(1, 3));   // 0.5773502692
math.sqrt(-1);               // NaN
math.sqrt(0);                // 0

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

Pattern: keep ratios unitless → call math.sqrt → multiply by a length when you need CSS sizes. Pair with math.pow and math.hypot.

Inputs and Results

How common inputs behave:

Related Functions

Load with @use "sass:math". Previous: math.sin(). Next: math.tan(). Also: math.pow(), math.hypot(), math.log(), math.abs().

SCSS Examples

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

@use "sass:math";

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

.basic {
  --hundred: #{math.sqrt(100)};
}

.basic {
  --hundred: 10;
}

@use "sass:math";

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

.third {
  --root: #{math.sqrt(math.div(1, 3))};
}

.third {
  --root: 0.5773502692;
}

@use "sass:math";

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

.neg {
  --nan: #{math.sqrt(-1)};
}

.neg {
  --nan: calc(NaN);
}

@use "sass:math";

.compare {
  --sqrt: #{math.sqrt(9)};
  --pow: #{math.pow(9, 0.5)};
}

.compare {
  --sqrt: 3;
  --pow: 3;
}

@use "sass:math";

.box {
  width: math.sqrt(100) * 1px;
  --diagonal-factor: #{math.sqrt(2)};
}

.box {
  width: 10px;
  --diagonal-factor: 1.4142135624;
}

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 a unitless number (use math.div for ratios)
3. Expect a unitless root (or NaN for negatives)
4. Multiply by a length when you need CSS sizes
5. Use CSS sqrt() for runtime values