Una de las muchas ventajas de los CSS pre-processors es permitir utilizar JavaScript nativamente -bueno, el pre-processor mismo está escrito en JavaScript– y con ello extender su uso antes de procesar el archivo y transformarlo en nuestro querido .css.

En este artículo mostraré varios mixins que permiten generar algún grado de aleatoriedad (random) dado cierto tipo de valor que necesites como por ejemplo, usándolos para calcular algún otro valor ya definido. Por supuesto puedes extenderlos, llevándolos a tus propias necesidades:

Número aleatorio⌗ 

/* makeRandom: 
   Mixin para generar un número aleatorio
   int debe ser 0 ó 1, 1 para hacerlo entero */
.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;
}
/* Uso: */
.rand1 {
  .makeRandom(); /* random decimal entre 0 - 1 */
  random-number: @randNum;
}
.rand2 {
  .makeRandom(@max: 2); /* random decimal entre 0 - 2 */
  random-number: @randNum;
}
.rand3 {
  .makeRandom(10, 20, 1); /* random entero entre  10 - 20 */
  random-number: @randNum;  
}

Gist: makeRandom()

Aleatorio de un arreglo⌗ 

/* Definiendo algunas variables de colores en este caso */
@blue: #009be1;
@green: #64c200;
@red: #ff1842;
@orange: #ffbf00;
@yellow: #ffd400;
/* Creando el arreglo */
@colors: '@{green}','@{blue}','@{red}','@{orange}','@{yellow}';
/* randomFromArray:
   Mixin para elegir un elemento
   aleatorio de un arreglo */
.randomFromArray(@min: 1, @max: length(@colors), @int: 0) {
  @getNum: `Math.random() * (@{max} - @{min} + @{int})`;
  @base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`);
  @randNum: floor( @base + @min );
  @color: e( extract(@colors, @randNum) );
}
/* Uso:*/
body {
  .randomFromArray();
  background-color: @color;
}

Gist: randomFromArray()

Generador de color HEX aleatorio⌗ 

/* randomColor:
   Mixin para crear aleatoriamente
   una hexacromía para color */
.randomColor(){
  @randomColor: `Math.floor(Math.random()*16777215).toString(16)`;
  @colorHex: e(@randomColor);
  @color: ~"#@{colorHex}";
}
/* Uso:*/
body {
  .randomColor();
  background-color: @color;
}

Gist: randomColor()