Sass math.tan() Function

What You’ll Learn

math.tan() is a trigonometric helper in the sass:math module. It returns the tangent of an angle—the slope ratio (rise ÷ run). You will learn angle units, the unitless-as-radians rule, Dart Sass 1.25+ notes, and five compiled examples.

What Is math.tan()?

Tangent answers: for this angle, how much rise do I get per unit of run? In Sass it returns that ratio as a unitless number:

• math.tan(100deg) → about -5.6712818196
• math.tan(1rad) → about 1.5574077247
• math.tan(1) → same as 1rad (unitless = radians)
• math.tan(45deg) → 1 (equal rise and run)

Official docs place it under Trigonometric Functions with math.sin() and math.cos(). Algebraically, tan = sin / cos for the same angle.

📝 Syntax

Load the math module, then pass an angle or a unitless radian value:

@use "sass:math";

math.tan($number)
// angle (deg-compatible) or unitless → radians

Parameters

Return value

📦 Loading sass:math

// Recommended — namespaced
@use "sass:math";
$t: math.tan(45deg);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$t: tan(45deg);

// Optional — custom namespace
@use "sass:math" as m;
$t: m.tan(45deg);

📏 How Units Work

Pass an angle, or omit units to mean radians. The result is always unitless—multiply by a run length when you need the rise as a CSS length.

🛠 Compatibility

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

Examples Gallery

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

@use "sass:math";

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

.demo {
  --tan-100deg: #{math.tan(100deg)};
  --tan-1rad: #{math.tan(1rad)};
}

.demo {
  --tan-100deg: -5.6712818196;
  --tan-1rad: 1.5574077247;
}

@use "sass:math";

.landmarks {
  --t0: #{math.tan(0deg)};   // 0
  --t30: #{math.tan(30deg)}; // ~0.5773502692
  --t45: #{math.tan(45deg)}; // 1
}

.landmarks {
  --t0: 0;
  --t30: 0.5773502692;
  --t45: 1;
}

@use "sass:math";

.compare {
  // These match (1 radian)
  --as-rad: #{math.tan(1rad)};
  --unitless: #{math.tan(1)};

  // This is different (1 degree)
  --as-deg: #{math.tan(1deg)};
}

.compare {
  --as-rad: 1.5574077247;
  --unitless: 1.5574077247;
  --as-deg: 0.0174550649;
}

@use "sass:math";

$run: 120px;
$angle: 30deg;
$rise: $run * math.tan($angle);

.ramp {
  width: $run;
  height: $rise;
  --tan: #{math.tan($angle)};
}

.ramp {
  width: 120px;
  height: 69.2820323028px;
  --tan: 0.5773502692;
}

@use "sass:math";

$angle: 100deg;

.check {
  --tan: #{math.tan($angle)};
  --via-sin-cos: #{math.sin($angle) / math.cos($angle)};
}

.check {
  --tan: -5.6712818196;
  --via-sin-cos: -5.6712818196;
}

🚀 Real-World Use Cases

• Ramps and wedges — compute height from a fixed width and angle.
• Skew / slant tokens — bake a slope ratio into custom properties.
• Clip-path helpers — derive vertical cuts from a known horizontal span.
• Teaching trig — show tan = sin/cos beside the dedicated helper.
• Design system angles — keep brand angles in deg, convert to slopes once.
• Fixed vs animated — use Sass when the angle is known; use CSS tan() when it must animate.

⚠️ Common Pitfalls

• Unitless ≠ degrees — bare numbers are radians; write deg when you mean degrees.
• Passing lengths — math.tan(10px) fails; pass an angle, then multiply by a length.
• Near 90° — tangent grows huge as cosine approaches zero; avoid for UI tokens.
• Expecting an angle back — tangent is a ratio, not deg.
• Old Dart Sass — need 1.25+; LibSass lacks the module API.

💡 Best Practices