Sass math.pow() Function

What You’ll Learn

math.pow() is an exponential helper in the sass:math module. It raises a unitless base to a power—squares, roots, negative exponents, and modular scales. You will learn unit rules, pairing with math.log, Dart Sass 1.25+ notes, and five compiled examples.

What Is math.pow()?

math.pow($base, $exponent) multiplies the base by itself according to the exponent. In plain words: base raised to the power of exponent.

• math.pow(10, 2) → 100 (10 × 10)
• math.pow(100, math.div(1, 3)) → about 4.6415888336 (cube root of 100)
• math.pow(5, -2) → 0.04 (1 ÷ 25)

Official docs group it with math.log() and math.sqrt under Exponential Functions. Powers grow a scale; logs recover the step index.

📝 Syntax

Load the math module, then pass a unitless base and exponent:

@use "sass:math";

math.pow($base, $exponent)
// both arguments must be unitless

Parameters

Return value

📦 Loading sass:math

// Recommended — namespaced
@use "sass:math";
$n: math.pow(10, 2);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$n: pow(10, 2);

// Optional — custom namespace
@use "sass:math" as m;
$n: m.pow(10, 2);

📏 How Units Work

Like math.log(), math.pow() accepts only unitless numbers. Compute the factor first, then multiply by a length.

🛠 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.pow(10, 2); // 100

.demo {
  --ten-squared: #{math.pow(10, 2)};
  z-index: math.pow(2, 3); // 8
}

.demo {
  --ten-squared: 100;
  z-index: 8;
}

@use "sass:math";

@debug math.pow(100, math.div(1, 3)); // ~4.6415888336

.root {
  --cube-root-100: #{math.pow(100, math.div(1, 3))};
  // square root via pow (same idea as math.sqrt)
  --sqrt-81: #{math.pow(81, 0.5)};
}

.root {
  --cube-root-100: 4.6415888336;
  --sqrt-81: 9;
}

@use "sass:math";

@debug math.pow(5, -2); // 0.04

.fade {
  // 1 / 5² = 0.04 → useful as a soft opacity token
  opacity: math.pow(5, -2);
  --inv-square: #{math.pow(5, -2)};
}

.fade {
  opacity: 0.04;
  --inv-square: 0.04;
}

@use "sass:math";

$base: 16px;
$ratio: 1.25; // major third-ish

.h1 { font-size: $base * math.pow($ratio, 3); } // 31.25px
.h2 { font-size: $base * math.pow($ratio, 2); } // 25px
.h3 { font-size: $base * math.pow($ratio, 1); } // 20px
.body { font-size: $base; }

.h1 {
  font-size: 31.25px;
}

.h2 {
  font-size: 25px;
}

.h3 {
  font-size: 20px;
}

.body {
  font-size: 16px;
}

@use "sass:math";

$base: 1rem;
$ratio: 1.25;
$step: 3;

$size: $base * math.pow($ratio, $step);
$index: math.log(math.div($size, $base), $ratio);

.heading {
  font-size: $size;
  --scale-index: #{$index};
}

.heading {
  font-size: 1.953125rem;
  --scale-index: 3;
}

🚀 Real-World Use Cases

• Modular type scales — generate heading sizes from a base and ratio.
• Spacing ramps — grow padding or gaps exponentially across breakpoints.
• Roots without sqrt only — cube roots and other nth roots via fractional exponents.
• Soft opacity / weight curves — negative powers for gentle falloff tokens.
• Design tokens — keep ratios unitless, multiply by rem/px once at the end.
• Teaching exponentials — pair with math.log to show inverse operations.

⚠️ Common Pitfalls

• Passing px / rem into pow — keep both args unitless; multiply by a length after.
• Forgetting @use — math.pow needs sass:math loaded.
• Using / for fractions — prefer math.div(1, 3) for clear division.
• Expecting CSS to re-run pow — only the computed result appears in the stylesheet.
• Old Dart Sass — need 1.25+; LibSass lacks the module API.

💡 Best Practices