Sass math.acos() Function

What You’ll Learn

math.acos() is an inverse trigonometric helper in the sass:math module. Given a cosine factor, it returns the matching angle in deg. You will learn the unitless input rule, NaNdeg behavior, pairing with math.cos, Dart Sass 1.25+ notes, and five compiled examples.

What Is math.acos()?

Arccosine answers: which angle has this cosine? In Sass the answer is always an angle in degrees:

• math.acos(0.5) → 60deg
• math.acos(1) → 0deg · math.acos(0) → 90deg · math.acos(-1) → 180deg
• math.acos(2) → NaNdeg (outside the cosine range)

Official docs place it under Trigonometric Functions next to math.cos(), math.asin, and math.atan. Use acos when you already have a unitless factor and need the angle back.

📝 Syntax

Load the math module, then pass a unitless number:

@use "sass:math";

math.acos($number)
// $number must be unitless → result is in deg

Parameters

Return value

📦 Loading sass:math

// Recommended — namespaced
@use "sass:math";
$a: math.acos(0.5);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$a: acos(0.5);

// Optional — custom namespace
@use "sass:math" as m;
$a: m.acos(0.5);

📏 How Units Work

Unlike math.cos() (which takes an angle), math.acos() takes a unitless factor and returns deg.

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a plain angle (or NaNdeg).

Examples Gallery

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

@use "sass:math";

@debug math.acos(0.5); // 60deg

.demo {
  --angle: #{math.acos(0.5)};
  rotate: math.acos(0.5);
}

.demo {
  --angle: 60deg;
  rotate: 60deg;
}

@use "sass:math";

.landmarks {
  --a1: #{math.acos(1)};   // 0deg
  --a0: #{math.acos(0)};   // 90deg
  --am1: #{math.acos(-1)}; // 180deg
}

.landmarks {
  --a1: 0deg;
  --a0: 90deg;
  --am1: 180deg;
}

@use "sass:math";

@debug math.acos(2); // NaNdeg

.guard {
  --bad: #{math.acos(2)};
  --ok: #{math.acos(0.5)};
}

.guard {
  --bad: NaNdeg;
  --ok: 60deg;
}

@use "sass:math";

$factor: 0.5;
$angle: math.acos($factor);          // 60deg
$back: math.cos($angle);            // ~0.5

.orbit {
  rotate: $angle;
  --factor: #{$back};
}

.orbit {
  rotate: 60deg;
  --factor: 0.5;
}

@use "sass:math";

$raw: 1.2; // oops — slightly out of range
$safe: math.clamp(-1, $raw, 1);
$angle: math.acos($safe); // 0deg

.safe-rotate {
  rotate: $angle;
  --raw: #{$raw};
  --safe: #{$safe};
}

.safe-rotate {
  rotate: 0deg;
  --raw: 1.2;
  --safe: 1;
}

🚀 Real-World Use Cases

• Recover angles — turn a stored cosine factor back into deg for rotate.
• Design-token bridges — authors edit ratios; Sass emits angles.
• Round-trip checks — validate that cos ↔ acos stay consistent in a scale.
• Safe geometry — clamp factors before acos to avoid NaNdeg.
• Teaching inverse trig — show how acos undoes cos with @debug.
• Fixed vs animated — use Sass when the factor is known; use CSS acos() when it must change at runtime.

⚠️ Common Pitfalls

• Passing angles into acos — input is a unitless factor, not deg.
• Out-of-range factors — values outside −1…1 become NaNdeg.
• Expecting radians — Sass acos always returns deg (unlike JS Math.acos).
• Forgetting @use — math.acos needs sass:math loaded.
• Old Dart Sass — need 1.25+; LibSass lacks the module API.

💡 Best Practices