Random Numbers

Generating a random number

Sometimes you just need a random number.

Here's how to get a random integer between 1 and 100:

.make-random(@min, @max) { 
  @rnd: floor(`Math.random() * @{max} + @{min}`);
}

.random-integer {
  .make-random(1, 100);
  foo: @rnd;
}

.random-integer {
  foo: random(100);
}

.random-integer
  foo: random(100)

random(min, max)
  return floor( math(0, "random") * max + min )

.random-integer
  foo: random(1, 100)

.random-integer {
  foo: resolve(floor(random() * 100 + 1));
}
 mathjs

.random-integer {
  foo: 56;
}

Note that Sass' built-in random function can get an upper-limit parameter, so random(100) will give you a value from the range 1-100.

It is apparent from these snippets that Sass offers the cleanest solution in terms of syntax, Stylus can work with a similar syntax but only after setting up a function, and Less requires us to define a mixin, call it, and then use the generated variable from it somewhere.

However, if you need to modify the lower limit in Sass you have to add or subtract a number after that, (note that this will affect the upper limit as well), the next examples on this page increase/decrease the upper/lower limits with simple addition and subtraction.

Cache Invalidation with random numbers

Random numbers can also be useful if you need to invalidate the cache of a certain external asset that is called from the CSS (such as background image or font).

A simple example is adding a four-digit random number as a query parameter:

.make-random(@min, @max) { 
  @rnd: floor(`Math.random() * @{max} + @{min}`);
}

.random-number-cache-invalidation {
  .make-random(1000, 9999);
  background-image: src("x.jpg?v=@{rnd}");
}

.random-number-cache-invalidation {
  background-image: src("x.jpg?v=#{random(9000) + 999}");
}

.random-number-cache-invalidation
  background-image: src("x.jpg?v=#{random(9000)+999}")

random(min, max)
  return floor( math(0, "random") * max + min )

.random-number-cache-invalidation
  background-image: src("x.jpg?v=" + random(1000, 9999))

.random-number-cache-invalidation {
  background-image: src(x.jpg?v=resolve(floor(random() * 9999 + 1000)));
}
 mathjs

.random-number-cache-invalidation {
  background-image: src("x.jpg?v=5656");
}

Random colors

You can get a unique color on every compilation by using random number generation.

One option is to set specific ranges for the R, G and/or B in a RGB color (for example 40-220, to avoid very dark or very light colors).

However, it's much more useful to randomize only the Hue in HSL and preset the Lightness and Saturation to get colors that look related and are of the same lightness/darkness:

.make-random(@min, @max) { 
  @rnd: floor(`Math.random() * @{max} + @{min}`);
}

.random-number-color {
  .make-random(0, 360);
  color: hsl(@rnd, 50%, 50%);
}

.random-number-color {
  color: hsl(random(361) - 1, 50%, 50%);
}

.random-number-color
  color: hsl(random(361)-1, 50%, 50%)

random(min, max)
  return floor( math(0, "random") * max + min )

.random-number-color
  color: hsl(random(0, 360), 50%, 50%)

.random-number-color {
  color: hsl(resolve(floor(random() * 360 + 0)), 50%, 50%);
}
 mathjs

.random-number-color {
  color: #4abf40;
}

Using the same approach you can get a color that is always blue-ish just by setting the random hue value to be somewhere between 180 and 270.