<div class="grid-1">1</div>
<div class="grid-11">11</div>
<div class="grid-2">2</div>
<div class="grid-10">10</div>
<div class="grid-3">3</div>
<div class="grid-9">9</div>
<div class="grid-4">4</div>
<div class="grid-8">8</div>
<div class="grid-5">5</div>
<div class="grid-7">7</div>
<div class="grid-6">6</div>
<div class="grid-6">6</div>
<div class="grid-12">12</div>

// create a loop mixin
.grid-loop(@columns, @total: @columns) when (@columns > 0) {
  // loop output
  [email protected]{columns} {
    width: percentage(@columns / @total);
  }
  
  // recursive call
  .grid-loop(@columns - 1, @total);
}

// apply the mixin, for 12 columns
.grid-loop(12);



// styles
[class^='grid-'] {
  border: 1px solid;
  box-sizing: border-box;
  float: left;
  padding: 1em 0;
  text-align: center;
}