Home Sass Math math.acos() Sass math.acos() Definition
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
Syntax @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.
Code
SCSS Examples Examples target Dart Sass 1.25+ with @use "sass:math". Open View Compiled CSS for verified output (matches official Sass docs samples).
1. Basic 2. Key angles 3. Out of range 4. Round-trip 5. CSS angle Example 1 — Official Docs Sample Arccosine of 0.5 is a 60° angle.
@use "sass:math";
@debug math.acos(0.5); // 60deg
.basic {
--half: #{math.acos(0.5)};
} .basic {
--half: 60deg;
} How It Works Unitless 0.5 is a valid cosine value.Result is 60deg , not radians.Ready for CSS properties that take angles.Matches the official Sass docs sample.Example 2 — Endpoints of the Domain Map 1, 0, and -1 to classic angles.
@use "sass:math";
.range {
--one: #{math.acos(1)};
--zero: #{math.acos(0)};
--neg: #{math.acos(-1)};
} .range {
--one: 0deg;
--zero: 90deg;
--neg: 180deg;
} How It Works acos(1) → 0deg.acos(0) → 90deg.acos(-1) → 180deg.Range is 0…180deg for real results.Example 3 — Out-of-Range Input Cosine never exceeds 1, so 2 is invalid.
@use "sass:math";
@debug math.acos(2); // NaN angle (docs: NaNdeg)
.nan {
--bad: #{math.acos(2)};
} .nan {
--bad: calc(NaN * 1deg);
} How It Works |x| > 1 is outside the cosine domain.Official docs label the result NaNdeg.Current Dart Sass serializes it as calc(NaN * 1deg).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.
@use "sass:math";
.roundtrip {
--back-num: #{math.cos(math.acos(0.5))};
--back-ang: #{math.acos(math.cos(60deg))};
--asin: #{math.asin(0.5)};
} .roundtrip {
--back-num: 0.5;
--back-ang: 60deg;
--asin: 30deg;
} How It Works cos(acos(0.5)) recovers 0.5.acos(cos(60deg)) recovers 60deg.asin(0.5) is 30deg — a different inverse.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.
@use "sass:math";
$cos: 0.5;
.angle {
--deg: #{math.acos($cos)};
transform: rotate(math.acos($cos));
} .angle {
--deg: 60deg;
transform: rotate(60deg);
} How It Works Store the ratio in a variable when reusing it.Sass compiles the angle before CSS sees it.transform receives plain 60deg.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.
Toolchain
Sass Support Prefer the module form with Dart Sass 1.25+.
API Status math.acos()Dart Sass 1.25+ via @use "sass:math" Input Unitless number Return type Angle in deg (or NaN angle) LibSass / Ruby Sass No modern sass:math acos
Compile with the Dart Sass CLI .
Remember
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).
Practice
Compile Notes Practical checklist:
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 What does Sass math.acos() do? 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.
How do I use math.acos() with @use? Add @use "sass:math"; then call math.acos($number). Requires Dart Sass 1.25+.
What input does math.acos() accept? A unitless number, typically between -1 and 1 (the range of cosine). Lengths like px or angles like deg are not allowed as input.
What does math.acos() return? 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).
How is math.acos related to math.cos? 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).
Is there a global acos() in Sass? 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 Developer, cloud engineer, and technical writer
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
Helpful Share Copy link Suggestion