Sass math.acos()

Beginner
10 min read
Updated: Nov 2026
5 examples
Dart Sass 1.25+

Definition and Usage

math.acos($number) returns the arccosine of $number in deg. $number must be unitless. Load it with @use "sass:math" on Dart Sass 1.25+.

Official samples.

math.acos(0.5) → 60deg. math.acos(2) is out of range (docs show NaNdeg; current Dart Sass emits calc(NaN * 1deg)).

Inverse of cosine.

Valid results sit between 0deg and 180deg. Pair with math.cos for round-trips.

Unitless input only.

Do not pass px, %, or deg into math.acos. Feed a plain cosine ratio (about -1 to 1).

Syntax

SCSS
@use "sass:math";

math.acos($number); //=> angle in deg

math.acos(0.5); // 60deg
math.acos(1);   // 0deg
math.acos(0);   // 90deg
math.acos(-1);  // 180deg
math.acos(2);   // NaN angle (out of range)

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

Pattern: compute a cosine ratio → math.acos for a CSS angle → compare with math.asin / math.atan when the geometry differs.

Domain and Range

Keep the cosine domain in mind before calling acos:

InputResult
math.acos(1)0deg
math.acos(0.5)60deg
math.acos(0)90deg
math.acos(-1)180deg
|x| > 1NaN angle (invalid cosine)
Input with unitsError — must be unitless
Compile-time angle.

Sass resolves math.acos while compiling, so CSS receives a concrete deg value (or a NaN calc).

SCSS Examples

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

Example 1 — Official Docs Sample

Arccosine of 0.5 is a 60° angle.

SCSS
@use "sass:math";

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

.basic {
  --half: #{math.acos(0.5)};
}

How It Works

  1. Unitless 0.5 is a valid cosine value.
  2. Result is 60deg, not radians.
  3. Ready for CSS properties that take angles.
  4. Matches the official Sass docs sample.

Example 2 — Endpoints of the Domain

Map 1, 0, and -1 to classic angles.

SCSS
@use "sass:math";

.range {
  --one: #{math.acos(1)};
  --zero: #{math.acos(0)};
  --neg: #{math.acos(-1)};
}

How It Works

  1. acos(1) → 0deg.
  2. acos(0) → 90deg.
  3. acos(-1) → 180deg.
  4. Range is 0…180deg for real results.

Example 3 — Out-of-Range Input

Cosine never exceeds 1, so 2 is invalid.

SCSS
@use "sass:math";

@debug math.acos(2); // NaN angle (docs: NaNdeg)

.nan {
  --bad: #{math.acos(2)};
}

How It Works

  1. |x| > 1 is outside the cosine domain.
  2. Official docs label the result NaNdeg.
  3. Current Dart Sass serializes it as calc(NaN * 1deg).
  4. Clamp or guard inputs before calling acos in real themes.

Example 4 — Round-Trip with math.cos

acos and cos undo each other for valid values.

SCSS
@use "sass:math";

.roundtrip {
  --back-num: #{math.cos(math.acos(0.5))};
  --back-ang: #{math.acos(math.cos(60deg))};
  --asin: #{math.asin(0.5)};
}

How It Works

  1. cos(acos(0.5)) recovers 0.5.
  2. acos(cos(60deg)) recovers 60deg.
  3. asin(0.5) is 30deg — a different inverse.
  4. Pick acos vs asin based on which trig ratio you have.

Example 5 — Emit a CSS Rotation

Turn a cosine ratio into a concrete rotate() angle.

SCSS
@use "sass:math";

$cos: 0.5;

.angle {
  --deg: #{math.acos($cos)};
  transform: rotate(math.acos($cos));
}

How It Works

  1. Store the ratio in a variable when reusing it.
  2. Sass compiles the angle before CSS sees it.
  3. transform receives plain 60deg.
  4. Useful for geometry helpers in design systems.

Edge Cases & Pitfalls

Most acos bugs are feeding units, or skipping the −1…1 domain check.

units

Input must be unitless

math.acos(0.5deg) or math.acos(0.5px) fails. Pass a plain number.

domain

Clamp before calling

If a ratio can drift past ±1 from rounding, clamp it first (for example with math.clamp(-1, $x, 1)).

nan

NaN serialization

Docs say NaNdeg; modern Dart Sass may emit calc(NaN * 1deg). Treat both as invalid angles.

module

Module-only helper

Use math.acos after @use "sass:math". Prefer that over any global alias.

Sass Support

Prefer the module form with Dart Sass 1.25+.

APIStatus
math.acos()Dart Sass 1.25+ via @use "sass:math"
InputUnitless number
Return typeAngle in deg (or NaN angle)
LibSass / Ruby SassNo modern sass:math acos

Compile with the Dart Sass CLI.

Key Takeaways

  • Returns arccosine in deg from a unitless cosine ratio.
  • Valid domain is -1…1; outside that yields a NaN angle.
  • Pairs with math.cos for inverse trigonometry.
  • Dart Sass 1.25+ via @use "sass:math".

One line: when a unitless cosine ratio must become a CSS angle, call math.acos($number).

Compile Notes

Practical checklist:

checklist.txt
1. @use "sass:math"
2. Pass a unitless ratio in -1…1
3. Expect a deg angle (0deg…180deg)
4. Clamp noisy inputs before acos
5. Use math.cos for the forward transform

Frequently Asked Questions

math.acos($number) returns the arccosine of a unitless number in degrees. Example: math.acos(0.5) is 60deg. Values outside -1…1 are not a real angle; current Dart Sass emits calc(NaN * 1deg) for those.
Add @use "sass:math"; then call math.acos($number). Requires Dart Sass 1.25+.
A unitless number, typically between -1 and 1 (the range of cosine). Lengths like px or angles like deg are not allowed as input.
An angle in deg. For valid inputs the result is between 0deg and 180deg. Out-of-range inputs produce a NaN angle (serialized as calc(NaN * 1deg) in modern Dart Sass).
They are inverse ideas: math.cos(math.acos(0.5)) recovers 0.5, and math.acos(math.cos(60deg)) recovers 60deg (within floating-point precision).
Official docs expose this as math.acos() on sass:math. Prefer the module form with @use "sass:math".

Next: Sass math.asin()

Return the arcsine of a unitless number in degrees.

math.asin() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

8 people found this page helpful