Sass math.atan2()

Definition and Usage

math.atan2($y, $x) returns the 2-argument arctangent of $y and $x in deg. $y and $x must be unitless or share compatible units. Load it with @use "sass:math" on Dart Sass 1.25+.

Syntax

@use "sass:math";

math.atan2($y, $x); //=> angle in deg

math.atan2(1, -1); // 135deg  — point (-1, 1)
math.atan2(1, 1);  // 45deg
math.atan2(0, 1);  // 0deg

// Compatible length units are fine
math.atan2(10px, -10px); // 135deg

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

Pattern: pass separate vertical and horizontal components → get a CSS angle that respects the quadrant → use math.atan only when you already have a single unitless slope and do not need quadrant.

Quadrants and Axes

Verified Dart Sass angles for common points:

Related Functions

Load with @use "sass:math". Previous: math.atan(). Next: math.ceil(). Also: math.tan(), math.asin(), math.acos(), math.div(), math.compatible().

SCSS Examples

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

@use "sass:math";

@debug math.atan2(1, -1); // 135deg

.basic {
  --q2: #{math.atan2(1, -1)};
}

.basic {
  --q2: 135deg;
}

@use "sass:math";

.compare {
  --atan: #{math.atan(math.div(1, -1))};
  --atan2: #{math.atan2(1, -1)};
}

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

@use "sass:math";

.quads {
  --q1: #{math.atan2(1, 1)};
  --q2: #{math.atan2(1, -1)};
  --q3: #{math.atan2(-1, -1)};
  --q4: #{math.atan2(-1, 1)};
}

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

@use "sass:math";

.axes {
  --pos-x: #{math.atan2(0, 1)};
  --pos-y: #{math.atan2(1, 0)};
  --neg-x: #{math.atan2(0, -1)};
  --neg-y: #{math.atan2(-1, 0)};
  --origin: #{math.atan2(0, 0)};
}

.axes {
  --pos-x: 0deg;
  --pos-y: 90deg;
  --neg-x: 180deg;
  --neg-y: -90deg;
  --origin: 0deg;
}

@use "sass:math";

$y: 1;
$x: -1;

.angle {
  --deg: #{math.atan2($y, $x)};
  transform: rotate(math.atan2($y, $x));
}

.angle {
  --deg: 135deg;
  transform: rotate(135deg);
}

Sass Support

Prefer the module form with Dart Sass 1.25+.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. @use "sass:math"
2. Pass $y first, then $x (compatible units or unitless)
3. Expect a deg angle that respects the quadrant
4. Do not divide before calling atan2
5. Use math.atan only for a single known slope