- for (var x = 0; x < 64; x++)
.square
View Compiled
/* 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;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.