Sass math.random()

Definition and Usage

math.random($limit: null) returns a random number when Sass compiles. With no argument, you get a decimal between 0 and 1. With a $limit ≥ 1, you get a whole number from 1 to $limit (inclusive). Load it with @use "sass:math" (Dart Sass 1.23+ for modules).

Syntax

@use "sass:math";

math.random($limit: null); //=> number

math.random();      // decimal in [0, 1)
math.random(10);    // integer in 1…10
math.random(10000); // integer in 1…10000

// Future-safe unitful limit (recommended)
math.random(math.div(100px, 1px)) * 1px;

// Global name (legacy / deprecated in modern Dart Sass)
random(10);

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

Pattern: choose decimal or integer mode → call once per needed value → remember the result is frozen in the compiled CSS.

Modes and Limits

Two call shapes:

Related Functions

Load with @use "sass:math". Previous: math.pow(). Next: math.round(). Also: math.div(), math.clamp(), math.floor(), @if.

SCSS Examples

Examples target Dart Sass with @use "sass:math". Open View Compiled CSS for a sample compile (numbers change each run; aligned with official Sass docs).

@use "sass:math";

@debug math.random(); // e.g. 0.2821251858

.basic {
  --a: #{math.random()};
}

.basic {
  --a: 0.7667050899;
}

@use "sass:math";

@debug math.random(10); // e.g. 4

.limit {
  --b: #{math.random(10)};
}

.limit {
  --b: 7;
}

@use "sass:math";

@debug math.random(10000); // e.g. 5373

.large {
  --c: #{math.random(10000)};
}

.large {
  --c: 2166;
}

@use "sass:math";

$limit: 100px;

.units {
  // Recommended (keeps px on the result)
  --safe: #{math.random(math.div($limit, 1px)) * 1px};

  // Avoid: math.random(100px) — currently ignores units + warns
}

.units {
  --safe: 34px;
}

@use "sass:math";

$n: math.random(4);

.box {
  @if $n == 1 { width: 10px; }
  @else if $n == 2 { width: 20px; }
  @else if $n == 3 { width: 30px; }
  @else { width: 40px; }

  opacity: math.random();
}

.box {
  width: 40px;
  opacity: 0.8027325417;
}

Sass Support

Prefer the module form with Dart Sass 1.23+.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. @use "sass:math"
2. math.random() for 0…1; math.random($n) for 1…$n
3. Store the result if several rules must share one roll
4. For unitful limits: random(div($limit, 1u)) * 1u
5. Prefer math.random over global random()