LESS mixin: randomFromArray

index.jade

- for (var x = 0; x < 64; x++)
  .square

LESS-mixin:-randomFromArray.markdown

LESS mixin: randomFromArray

LESS mixin to choose a random element from a array

A Pen by Jorge Epuñan on CodePen.

License.

style.less

/* randomFromArray:
	LESS mixin to choose 
	a random element from a array. 
	gist: https://gist.github.com/juanbrujo/972ed5d1dd488605fe90
*/

// The mixin;
.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) );
}

/* Defining some color variables */
@blue: #009be1;
@green: #64c200;
@red: #ff1842;
@orange: #ffbf00;
@yellow: #ffd400;
/* Creating the array */
@colors: '@{green}','@{blue}','@{red}','@{orange}','@{yellow}';

// Use:
@size: 100px;
@loop: 64;

.square {
  height: @size;
  width: @size;
  position: relative;
  float: left;
  
  .loop (@index) when (@index > 0){
    &:nth-of-type(@{index}){
      // INIT randomFromArray
      .randomFromArray();
  background-color: @color;
      // END randomFromArray
    }
    .loop (@index - 1);
  }
  .loop(0){}
  .loop(@loop);
  
}

// GENERAL STYLE
html,body{height:100%;}
body {
  background: black;
}