Sass math.cos() Function

What You’ll Learn

math.cos() is a trigonometric helper in the sass:math module. It returns the cosine of an angle—useful for circular layouts, soft fades, and fixed transform factors. You will learn angle units, the unitless-as-radians rule, Dart Sass 1.25+ notes, and five compiled examples.

What Is math.cos()?

Cosine relates an angle to a horizontal factor on the unit circle. In Sass it returns that factor as a unitless number (usually between -1 and 1):

• math.cos(100deg) → about -0.1736481777
• math.cos(1rad) → about 0.5403023059
• math.cos(1) → same as 1rad (unitless = radians)
• math.cos(0deg) → 1 · math.cos(180deg) → -1

Official docs place it under Trigonometric Functions with math.sin, math.tan, and the inverse helpers. Pair cosine with a radius to place points: $x: $r * math.cos($angle).

📝 Syntax

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

@use "sass:math";

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

Parameters

Return value

📦 Loading sass:math

// Recommended — namespaced
@use "sass:math";
$c: math.cos(60deg);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$c: cos(60deg);

// Optional — custom namespace
@use "sass:math" as m;
$c: m.cos(60deg);

📏 How Units Work

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

🛠 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.cos(100deg); // -0.1736481777
@debug math.cos(1rad);   // 0.5403023059
@debug math.cos(1);      // 0.5403023059

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

.demo {
  --cos-100deg: -0.1736481777;
  --cos-1rad: 0.5403023059;
}

@use "sass:math";

.landmarks {
  --c0: #{math.cos(0deg)};     // 1
  --c60: #{math.cos(60deg)};   // 0.5
  --c90: #{math.cos(90deg)};   // ~0
  --c180: #{math.cos(180deg)}; // -1
  --cpi: #{math.cos(math.$pi)}; // ~-1 (π radians)
}

.landmarks {
  --c0: 1;
  --c60: 0.5;
  --c90: 0;
  --c180: -1;
  --cpi: -1;
}

@use "sass:math";

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

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

.compare {
  --as-rad: 0.5403023059;
  --unitless: 0.5403023059;
  --as-deg: 0.9998476952;
}

@use "sass:math";

$r: 80px;
$angle: 30deg;

.orbit-item {
  // x = r · cos(θ)
  left: 50% + $r * math.cos($angle);
  // pair with sin for y when you add math.sin
  --cos: #{math.cos($angle)};
}

.orbit-item {
  left: calc(50% + 69.2820323028px);
  --cos: 0.8660254038;
}

@use "sass:math";

// cos goes -1…1 → shift to 0…1
$angle: 120deg;
$factor: (math.cos($angle) + 1) / 2;

.soft {
  opacity: $factor;
  transform: scale($factor);
}

.soft {
  opacity: 0.25;
  transform: scale(0.25);
}

🚀 Real-World Use Cases

• Circular menus — compute fixed x positions with $r * math.cos($angle).
• Icon / badge rings — place known steps around a circle in a design system.
• Soft fades — map cosine into 0–1 for opacity or scale tokens.
• Transform factors — bake horizontal projection into translate or scale.
• Teaching trig — show deg vs rad vs unitless with @debug.
• Fixed vs animated — use Sass when the angle is known; use CSS cos() when it must animate.

⚠️ Common Pitfalls

• Unitless ≠ degrees — bare numbers are radians; write deg when you mean degrees.
• Passing lengths — math.cos(10px) fails; pass an angle, then multiply by a length.
• Forgetting @use — math.cos needs sass:math loaded.
• Expecting an angle back — cosine is a ratio, not deg.
• Old Dart Sass — need 1.25+; LibSass lacks the module API.

💡 Best Practices