Sass math.atan2() Function

What You’ll Learn

math.atan2() is an inverse trigonometric helper in the sass:math module. Given separate $y and $x components, it returns the angle in deg while keeping the correct quadrant. You will learn argument order, unit rules, why it beats math.atan(math.div($y, $x)), Dart Sass 1.25+ notes, and five compiled examples.

What Is math.atan2()?

Two-argument arctangent answers: what angle is the point (x, y) from the origin? Unlike a single slope, both signs stay visible, so each quadrant stays distinct:

• math.atan2(1, -1) → 135deg (point (-1, 1), as in the official docs fun fact)
• math.atan2(1, 1) → 45deg · math.atan2(-1, 1) → -45deg
• math.atan(math.div(1, -1)) and math.atan(math.div(-1, 1)) both become atan(-1) → -45deg

Official docs place it under Trigonometric Functions next to math.atan(). Prefer atan2 whenever you still have separate horizontal and vertical offsets.

📝 Syntax

Load the math module, then pass vertical and horizontal components:

@use "sass:math";

math.atan2($y, $x)
// returns an angle in deg

Parameters

Return value

📦 Loading sass:math

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

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

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

📏 How Units Work

Both arguments must be unitless, or share compatible units. Absolute lengths like px and cm can mix; relative units like em with px cannot.

🛠 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";

// y = 1, x = -1 → point (-1, 1)
@debug math.atan2(1, -1); // 135deg

.demo {
  --angle: #{math.atan2(1, -1)};
  rotate: math.atan2(1, -1);
}

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

@use "sass:math";

.q {
  --q1: #{math.atan2(1, 1)};   // 45deg
  --q2: #{math.atan2(1, -1)};  // 135deg
  --q3: #{math.atan2(-1, -1)}; // -135deg
  --q4: #{math.atan2(-1, 1)};  // -45deg
}

.q {
  --q1: 45deg;
  --q2: 135deg;
  --q3: -135deg;
  --q4: -45deg;
}

@use "sass:math";

.compare {
  --atan2: #{math.atan2(1, -1)};                 // 135deg
  --atan-a: #{math.atan(math.div(1, -1))};       // -45deg
  --atan-b: #{math.atan(math.div(-1, 1))};       // -45deg
}

.compare {
  --atan2: 135deg;
  --atan-a: -45deg;
  --atan-b: -45deg;
}

@use "sass:math";

$dy: 30px;
$dx: 40px;

.arrow {
  rotate: math.atan2($dy, $dx); // 36.8698976458deg
  --angle: #{math.atan2($dy, $dx)};
}

.arrow {
  rotate: 36.8698976458deg;
  --angle: 36.8698976458deg;
}

@use "sass:math";

// from origin toward (-80px, 40px)
$dx: -80px;
$dy: 40px;
$angle: math.atan2($dy, $dx); // 153.4349488229deg

.pointer {
  rotate: $angle;
  width: math.hypot($dx, $dy);
}

.pointer {
  rotate: 153.4349488229deg;
  width: 89.4427191px;
}

🚀 Real-World Use Cases

• Pointers / chevrons — rotate toward a known offset.
• Orbit badges — place items from cartesian offsets with correct quadrants.
• Connector lines — angle a stroke from (dx, dy).
• Icon geometry — keep Q2/Q3 directions that plain atan would flip.
• Teaching quadrants — contrast atan2 with atan(y/x).
• Fixed vs measured — use Sass when offsets are known; use JS/CSS when they are live.

⚠️ Common Pitfalls

• Swapping x and y — order is ($y, $x), not ($x, $y).
• Using atan(y/x) — loses quadrant; prefer atan2 for directed geometry.
• Incompatible units — px with em fails.
• Expecting radians — Sass atan2 always returns deg.
• Old Dart Sass — need 1.25+; LibSass lacks the module API.

💡 Best Practices