Sass math.atan() Function

What You’ll Learn

math.atan() is an inverse trigonometric helper in the sass:math module. Given a slope ratio (rise ÷ run), it returns the matching angle in deg. You will learn the unitless input rule, pairing with math.tan, when to prefer math.atan2, Dart Sass 1.25+ notes, and five compiled examples.

What Is math.atan()?

Arctangent answers: which angle has this tangent (slope)? In Sass the answer is always an angle in degrees:

• math.atan(10) → about 84.2894068625deg
• math.atan(0) → 0deg · math.atan(1) → 45deg · math.atan(-1) → -45deg
• Very large ratios approach ±90deg (steep / near-vertical slopes)

Official docs place it under Trigonometric Functions next to math.tan(), math.asin(), and math.acos(). For two separate components with quadrant awareness, use math.atan2($y, $x).

📝 Syntax

Load the math module, then pass a unitless number:

@use "sass:math";

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

Parameters

Return value

📦 Loading sass:math

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

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

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

📏 How Units Work

Unlike math.tan() (which takes an angle), math.atan() takes a unitless slope and returns deg. Strip length units with a same-unit ratio first.

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a plain angle.

Examples Gallery

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

@use "sass:math";

@debug math.atan(10); // 84.2894068625deg

.demo {
  --angle: #{math.atan(10)};
  rotate: math.atan(10);
}

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

@use "sass:math";

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

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

@use "sass:math";

$run: 120px;
$rise: 60px;
$angle: math.atan(math.div($rise, $run));

.ramp {
  width: $run;
  height: $rise;
  rotate: $angle;
  --angle: #{$angle};
}

.ramp {
  width: 120px;
  height: 60px;
  rotate: 26.5650511771deg;
  --angle: 26.5650511771deg;
}

@use "sass:math";

$slope: 10;
$angle: math.atan($slope);       // ~84.289deg
$back: math.tan($angle);         // ~10

.check {
  rotate: $angle;
  --slope: #{$back};
}

.check {
  rotate: 84.2894068625deg;
  --slope: 10;
}

@use "sass:math";

.steep {
  --a10: #{math.atan(10)};
  --a100: #{math.atan(100)};
  --a1000: #{math.atan(1000)};
}

.steep {
  --a10: 84.2894068625deg;
  --a100: 89.4270613023deg;
  --a1000: 89.9427042396deg;
}

🚀 Real-World Use Cases

• Ramp angles — turn rise/run lengths into a rotate angle.
• Skew tokens — author slopes as ratios; Sass emits degrees.
• Round-trip checks — validate that tan ↔ atan stay consistent.
• Icon geometry — derive pointer or chevron angles from offsets.
• Teaching inverse trig — show how atan undoes tan with @debug.
• Quadrant-safe work — switch to math.atan2 when x/y signs matter.

⚠️ Common Pitfalls

• Passing lengths into atan — input is a unitless ratio, not px.
• Expecting radians — Sass atan always returns deg (unlike JS Math.atan).
• Losing quadrant — atan(y/x) can flip signs; use math.atan2($y, $x) when needed.
• Confusing with asin/acos — atan accepts any real slope, not only −1…1.
• Old Dart Sass — need 1.25+; LibSass lacks the module API.

💡 Best Practices