Generate random number in LESS CSS?

Question

Tried searching for this but it's difficult given the syntax. Is there any way to generate a random number in LESS? I checked the documentation and don't see anything, but wondered if anyone knew of a trick or undocumented solution.

Answer 1

By a LESS Mixin for Variation

By making a LESS mixin to generate the random number, you can call it each place as needed with easier control of the output. This code was built in part from the help of this SO answer, which allows you to control the output range of the random number, and whether it outputs decimals or integers.

LESS Define Mixin

/* Mixin to generate random number;
   int should be 0 or 1, 1 being to make it an integer 
*/
.makeRandom(@min: 0, @max: @min+1, @int: 0) { 
  .checkInt() {
    @getNum: `Math.random() * (@{max} - @{min} + @{int})`;
    @base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`);
  }
  .checkInt();
  @randNum: @base + @min;
}

The above will output a variable labeled @randNum for each time the mixin is called. So then this can be done:

LESS Use Mixin

.rand1 {
  .makeRandom(); /* straight random decimal between 0 - 1 */
  random-number: @randNum;
}

.rand2 {
  .makeRandom(@max: 2); /* random decimal 0 - 2 */
  random-number: @randNum;
}

.rand3 {
  .makeRandom(10, 20, 1); /* random integer  10 - 20 */
  random-number: @randNum;  
}

Which yields an output something along these lines (of course, the numbers will change with each compilation from LESS):

CSS Output

.rand1 {
  /* straight random decimal between 0 - 1 */

  random-number: 0.1597523226169918;
}
.rand2 {
  /* random decimal 0 - 2 */

  random-number: 0.08123856632111548;
}
.rand3 {
  /* random intger  10 - 20 */

  random-number: 15;
}

Of course, I realize you would probably in most cases not be directly outputting these random numbers, but rather using them in some other calculation. But this illustrates how the mixin can be used.

I also realize this does not resolve any randomness with respect to the same class usage. In other words, any element with .rand3 class above will have 15 as its number. I believe this is the issue you ran into based on your comment:

Unfortunately, I didn't think about this making all matching elements the SAME random number, which of course it does. So I ended up using JQuery each() with standard javascript to accomplish what I wanted.

That is just the fact of life for LESS being a preprocessor of CSS. To get randomness across similar elements via LESS you would need to generate the random numbers from this mixin by a series of classes via some sort of a loop structure and apply each class of the series to the various elements to get the randomness.

Answer 2

According to the documentation:

JavaScript evaluation JavaScript expressions can be evaluated as values inside .less files. We recommend using caution with this feature as the LESS will not be compilable by ports and it makes the LESS harder to maintain. If possible, try to think of a function that can be added to achieve the same purpose and ask for it on github. We have plans to allow expanding the default functions available. However, if you still want to use JavaScript in .less, this is done by wrapping the expression with back-ticks:

So this should work:

@var: `Math.random()`;