Sass math.sin() Function

What You’ll Learn

math.sin() is a trigonometric helper in the sass:math module. It returns the sine of an angle—useful for circular layouts, wave-like tokens, 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.sin()?

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

• math.sin(100deg) → about 0.984807753
• math.sin(1rad) → about 0.8414709848
• math.sin(1) → same as 1rad (unitless = radians)
• math.sin(0deg) → 0 · math.sin(90deg) → 1

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

📝 Syntax

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

@use "sass:math";

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

Parameters

Return value

📦 Loading sass:math

// Recommended — namespaced
@use "sass:math";
$s: math.sin(30deg);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$s: sin(30deg);

// Optional — custom namespace
@use "sass:math" as m;
$s: m.sin(30deg);

📏 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.sin(100deg); // 0.984807753
@debug math.sin(1rad);   // 0.8414709848
@debug math.sin(1);      // 0.8414709848

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

.demo {
  --sin-100deg: 0.984807753;
  --sin-1rad: 0.8414709848;
}

@use "sass:math";

.landmarks {
  --s0: #{math.sin(0deg)};     // 0
  --s30: #{math.sin(30deg)};   // 0.5
  --s90: #{math.sin(90deg)};   // 1
  --s180: #{math.sin(180deg)}; // ~0
  --spi: #{math.sin(math.$pi)}; // ~0 (π radians)
}

.landmarks {
  --s0: 0;
  --s30: 0.5;
  --s90: 1;
  --s180: 0;
  --spi: 0;
}

@use "sass:math";

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

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

.compare {
  --as-rad: 0.8414709848;
  --unitless: 0.8414709848;
  --as-deg: 0.0174524064;
}

@use "sass:math";

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

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

.orbit-item {
  top: calc(50% + 40px);
  --sin: 0.5;
}

@use "sass:math";

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

.soft {
  opacity: $factor;
  transform: translateY(#{(1 - $factor) * 12px});
}

.soft {
  opacity: 0.75;
  transform: translateY(3px);
}

🚀 Real-World Use Cases

• Circular menus — compute fixed y positions with $r * math.sin($angle).
• Icon / badge rings — place known steps around a circle with cos for x and sin for y.
• Soft fades — map sine into 0–1 for opacity or motion tokens.
• Wave-like spacing — bake vertical projection into translate or margin.
• Teaching trig — show deg vs rad vs unitless with @debug.
• Fixed vs animated — use Sass when the angle is known; use CSS sin() when it must animate.

⚠️ Common Pitfalls

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

💡 Best Practices