- for (var x = 0; x < 64; x++)
  .square
View Compiled
/* makeRandom:
	LESS mixin to generate a random number.
   @int must be 0/1; 1 to integer.
	gist: https://gist.github.com/juanbrujo/91be803643a2b0007061
*/
.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;
}

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

.square {
  height: @size;
  width: @size;
  position: relative;
  float: left;
  
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: @size;
    line-height: @size;
  	width: @size;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 2rem;
  }
  
  
  .loop (@index) when (@index > 0){
    &:nth-of-type(@{index}) {
      
      // INIT makeRandom
      .makeRandom(.5,1.5,0);
      transform: scale(@randNum);
      // END makeRandom
      
      &:before {
      
        // INIT makeRandom
        .makeRandom(0,64,1);
        content: "@{randNum}";
        .makeRandom(0,1,0);
        background-color: fade(white,@randNum);
        // END makeRandom
        
      }
      
    }
    .loop (@index - 1);
  }
  .loop(0){}
  .loop(@loop);
  
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.