Sass math.cos()

Definition and Usage

math.cos($number) returns the cosine 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.cos($number); //=> unitless number

math.cos(100deg); // -0.1736481777
math.cos(1rad);   // 0.5403023059
math.cos(1);      // 0.5403023059  (unitless = radians)

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

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

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

Angles and Units

How inputs are interpreted:

Related Functions

Load with @use "sass:math". Previous: math.compatible(). Next: math.div(). Also: math.sin(), math.tan(), math.acos(), math.asin().

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.cos(100deg); // -0.1736481777

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

.basic {
  --deg: -0.1736481777;
}

@use "sass:math";

@debug math.cos(1rad); // 0.5403023059
@debug math.cos(1);    // 0.5403023059

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

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

@use "sass:math";

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

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

@use "sass:math";

.roundtrip {
  --back: #{math.acos(math.cos(60deg))};
}

.roundtrip {
  --back: 60deg;
}

@use "sass:math";

$angle: 100deg;

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

.wave {
  --c: -0.1736481777;
  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 cos() for runtime angles