Sass math.log() Function

What You’ll Learn

math.log() is an exponential helper in the sass:math module. It returns the logarithm of a unitless number—natural log by default, or any base you pass. You will learn the optional $base argument, unit rules, pairing with math.pow, Dart Sass 1.25+ notes, and five compiled examples.

What Is math.log()?

A logarithm answers: to what power must the base be raised to get this number? In Sass:

• math.log(10) → about 2.302585093 (natural log of 10)
• math.log(10, 10) → 1 (because 10¹ = 10)
• math.log(8, 2) → 3 (because 2³ = 8)

Official docs group it with math.pow and math.sqrt under Exponential Functions. Logs undo powers: if you grow a scale with math.pow, you can recover the exponent with math.log.

📝 Syntax

Load the math module, then pass a unitless number and an optional base:

@use "sass:math";

math.log($number, $base: null)
// $base omitted  → natural log (base e)
// $base provided → log with that base

Parameters

Return value

📦 Loading sass:math

// Recommended — namespaced
@use "sass:math";
$ln: math.log(10);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$ln: log(10);

// Optional — custom namespace
@use "sass:math" as m;
$ln: m.log(10);

📏 How Units Work

Unlike math.abs() or math.hypot(), math.log() accepts only unitless numbers. Convert lengths to ratios before logging.

🛠 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.log(10); // 2.302585093

.demo {
  // illustrative custom property
  --ln-10: #{math.log(10)};
  opacity: math.log(math.$e); // ~1 → fully opaque idea
}

.demo {
  --ln-10: 2.302585093;
  opacity: 1;
}

@use "sass:math";

@debug math.log(10, 10); // 1
@debug math.log(8, 2);   // 3

.metrics {
  --log10-100: #{math.log(100, 10)};
  --log2-16: #{math.log(16, 2)};
}

.metrics {
  --log10-100: 2;
  --log2-16: 4;
}

@use "sass:math";

$base: 16px;
$size: 32px;
$steps: math.log(math.div($size, $base), 2); // 1

.icon {
  // one step up from the base on a binary scale
  font-size: $base * math.pow(2, $steps);
  --steps-from-base: #{$steps};
}

.icon {
  font-size: 32px;
  --steps-from-base: 1;
}

@use "sass:math";

$value: 10;
$base: 10;
$exp: math.log($value, $base); // 1
$back: math.pow($base, $exp);  // 10

.check {
  --exp: #{$exp};
  --round-trip: #{$back};
}

.check {
  --exp: 1;
  --round-trip: 10;
}

@use "sass:math";

$base-size: 1rem;
$ratio: 1.25; // major third-ish modular scale
$target: 1.953125rem; // ≈ base × ratio^3

$index: math.log(math.div($target, $base-size), $ratio);

.heading {
  // rebuild from index to prove the step
  font-size: $base-size * math.pow($ratio, $index);
  --scale-index: #{$index};
}

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

🚀 Real-World Use Cases

• Modular type scales — find which step a size sits on.
• Binary spacing — count doublings from a base length with log base 2.
• Token validation — round-trip with math.pow to check scale math.
• Opacity / weight curves — map unitless factors through log for softer ramps (then clamp).
• Design docs in SCSS — expose --log-* custom properties for tooling.
• Teaching exponentials — show how log undoes pow alongside math.sqrt.

⚠️ Common Pitfalls

• Passing px / rem — math.log needs unitless values; use math.div first.
• Forgetting @use — math.log needs sass:math loaded.
• Confusing natural log with log₁₀ — omit base for ln; pass 10 for common log.
• Invalid domains — non-positive numbers or bad bases can yield NaN or errors; keep inputs meaningful.
• Old Dart Sass — need 1.25+; LibSass lacks the module API.

💡 Best Practices