Sass math.sin()

Definition and Usage

math.sin($number) returns the sine of $number. Pass an angle whose units are compatible with deg, or a unitless number treated as radians. The result is a unitless ratio (typically between -1 and 1). Load it with @use "sass:math" on Dart Sass 1.25+.

Syntax

@use "sass:math";

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

math.sin(100deg); // 0.984807753
math.sin(1rad);   // 0.8414709848
math.sin(1);      // 0.8414709848  (unitless = radians)

math.sin(0deg);   // 0
math.sin(90deg);  // 1

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

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

Angles and Units

How inputs are interpreted:

Related Functions

Load with @use "sass:math". Previous: math.round(). Next: math.sqrt(). Also: math.cos(), math.tan(), math.asin(), math.acos().

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.sin(100deg); // 0.984807753

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

.basic {
  --deg: 0.984807753;
}

@use "sass:math";

@debug math.sin(1rad); // 0.8414709848
@debug math.sin(1);    // 0.8414709848

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

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

@use "sass:math";

.angles {
  --zero: #{math.sin(0deg)};
  --thirty: #{math.sin(30deg)};
  --ninety: #{math.sin(90deg)};
  --one-eighty: #{math.sin(180deg)};
}

.angles {
  --zero: 0;
  --thirty: 0.5;
  --ninety: 1;
  --one-eighty: 0;
}

@use "sass:math";

.roundtrip {
  --back: #{math.asin(math.sin(30deg))};
  --ratio: #{math.sin(math.asin(0.5))};
}

.roundtrip {
  --back: 30deg;
  --ratio: 0.5;
}

@use "sass:math";

$angle: 100deg;

.wave {
  --s: #{math.sin($angle)};
  opacity: math.sin(90deg);
}

.wave {
  --s: 0.984807753;
  opacity: 1;
}

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 ratio (about -1…1)
4. Multiply by a length when you need CSS offsets
5. Use CSS sin() for runtime angles