Sass math.tan()

Definition and Usage

math.tan($number) returns the tangent of $number. Pass an angle whose units are compatible with deg, or a unitless number treated as radians. The result is a unitless ratio (rise over run / slope). Load it with @use "sass:math" on Dart Sass 1.25+.

Syntax

@use "sass:math";

math.tan($number); //=> unitless number

math.tan(100deg); // -5.6712818196
math.tan(1rad);   // 1.5574077247
math.tan(1);      // 1.5574077247  (unitless = radians)

math.tan(0deg);   // 0
math.tan(45deg);  // 1

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

Pattern: choose an angle unit → call math.tan → multiply by a run length when you need CSS rise. Pair with math.sin, math.cos, and math.atan.

Angles and Units

How inputs are interpreted:

Related Functions

Load with @use "sass:math". Previous: math.sqrt(). Next: math.unit(). Also: math.sin(), math.cos(), math.atan(), math.atan2().

SCSS Examples

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

@use "sass:math";

@debug math.tan(100deg); // -5.6712818196

.basic {
  --deg: #{math.tan(100deg)};
}

.basic {
  --deg: -5.6712818196;
}

@use "sass:math";

@debug math.tan(1rad); // 1.5574077247
@debug math.tan(1);    // 1.5574077247

.rad {
  --rad: #{math.tan(1rad)};
  --unitless: #{math.tan(1)};
}

.rad {
  --rad: 1.5574077247;
  --unitless: 1.5574077247;
}

@use "sass:math";

.angles {
  --zero: #{math.tan(0deg)};
  --forty-five: #{math.tan(45deg)};
}

.angles {
  --zero: 0;
  --forty-five: 1;
}

@use "sass:math";

.compare {
  --tan: #{math.tan(30deg)};
  --via-sin-cos: #{math.div(math.sin(30deg), math.cos(30deg))};
}

.compare {
  --tan: 0.5773502692;
  --via-sin-cos: 0.5773502692;
}

@use "sass:math";

$angle: 100deg;

.wave {
  --t: #{math.tan($angle)};
  opacity: math.tan(0deg);
}

.wave {
  --t: -5.6712818196;
  opacity: 0;
}

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 deg-compatible angle or unitless radians
3. Expect a unitless slope ratio
4. Multiply by a run length when you need CSS rise
5. Use CSS tan() for runtime angles