Sass math.asin() Function

What You’ll Learn

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

What Is math.asin()?

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

• math.asin(0.5) → 30deg
• math.asin(0) → 0deg · math.asin(1) → 90deg · math.asin(-1) → -90deg
• math.asin(2) → NaNdeg (outside the sine range)

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

📝 Syntax

Load the math module, then pass a unitless number:

@use "sass:math";

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

Parameters

Return value

📦 Loading sass:math

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

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

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

📏 How Units Work

Unlike math.sin() (which takes an angle), math.asin() 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.asin(0.5); // 30deg

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

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

@use "sass:math";

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

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

@use "sass:math";

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

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

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

@use "sass:math";

$factor: 0.5;
$angle: math.asin($factor);          // 30deg
$back: math.sin($angle);            // ~0.5

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

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

@use "sass:math";

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

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

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

🚀 Real-World Use Cases

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

⚠️ Common Pitfalls

• Passing angles into asin — input is a unitless factor, not deg.
• Out-of-range factors — values outside −1…1 become NaNdeg.
• Expecting radians — Sass asin always returns deg (unlike JS Math.asin).
• Confusing with acos range — asin is −90…90; acos is 0…180.
• Old Dart Sass — need 1.25+; LibSass lacks the module API.

💡 Best Practices