17

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!

Serhii Borovskyi
  • 771
  • 2
  • 7
  • 17

2 Answers2

24

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

Raviteja
  • 3,399
  • 23
  • 42
  • 69
20

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.

Community
  • 1
  • 1
3rdthemagical
  • 5,271
  • 18
  • 36