CodePen

HTML

            
              <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              div {
  float: left; position: relative;
  width: 20px; height: 20px;
  margin: 0;
}

.output(@i) {
    (~"div:nth-child(@{i})") {
        width: @i * @i * 1px;
        background-color: #000 + (@i * 12.8);
    }
}

.do(@i) when (@i > 0) {

    // do stuff
    .output(@i);

    // next iteration
    .do(@i - 1);
}

.do(0) {} // define endpoint. do nothing if input is 0.

.do(20); // initializer
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................