How to generate a random number within a min and max parameters in SASS?

Question

How to generate a random number within a min and max parameters in SASS? For example a random number from 5 to 15.

.foo
  font-size: random(15)#{px}

If that is not possible, what would be a similar formula?

Thank you!

Answer 1

There is no minimum value to set in SASS.

But you can tweak it as follows for a random number from 5 to 15.

.foo
  font-size: (random(11) + 4)+px

added 4 to 11, because random() function has minimum value of 1

Answer 2

There is a standard pattern to generate random value in a range.

Min + (int)(Math.random() * ((Max - Min) + 1))

In scss it would look like:

@function randomNum($min, $max) {
  $rand: random();
  $randomNum: $min + floor($rand * (($max - $min) + 1));

  @return $randomNum;
}

.foo {
  font-size: #{randomNum(5, 10)}px;
}

Sassmeister demo.