Simple responsive grid using LESS generated by looping through the number of columns.

responsive-less-grid.less

/* VARS */
@grid-columns: 12;
@grid-padding: 1em;
@grid-breakpoint: 45em;

/* MIXINS */
.box-sizing() {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix() {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

/* Grid container */
.grid {
  width: 100%;
  .box-sizing();

  /* Row */
  &-row {
    .clearfix();
  }
}

/* Mobile first...all columns 100% width */
[class*="grid-col"] { 
  width: 100%; 
  padding: @grid-padding;
  float: left;
  .box-sizing();
}

/* Mixing to calc column width by looping */
.grid-columns ( @number )  when ( @number > 0 ) {
  .grid-col-@{number} {
    width: percentage(floor(@number * 1000000000 / 12) / 1000000000);
  } 

  .grid-columns(@number - 1);
}

@media (min-width: @grid-breakpoint) {
  .grid { padding: 0 5%; }
  /* Generate the grid columns */
  .grid-columns(@grid-columns); 
}