Semantic grid mix-ins for LESS

README.md

Example LESS file:

.layout {
    .row();    
    background: #ddd;
}

.nav {
    .col(4);
    background: red;
}

.content {
    .col(6);
    background: green;
}

.ads {
    .col(2);
    background: blue;
}

Resulting CSS:

.layout {
  display: block;
  width: 940px;
  overflow: hidden;
  background: #ddd;
}
.layout > :first-child {
  margin-left: 0;
}
.nav {
  display: inline-block;
  float: left;
  width: 300px;
  margin-left: 20px;
  background: red;
}
.content {
  display: inline-block;
  float: left;
  width: 460px;
  margin-left: 20px;
  background: green;
}
.ads {
  display: inline-block;
  float: left;
  width: 140px;
  margin-left: 20px;
  background: blue;
}

Example in fiddle here

grid.less

@grid-column-size: 60;
@grid-gutter-size: 20;
@grid-num-columns: 12;
@grid-unit: 1px;

.width (@n) {
    & when (@n = 1) {
        width: @grid-column-size * @n * @grid-unit;
    }
    & when (@n > 1) {
        width: (@grid-column-size * @n + @grid-gutter-size * (@n - 1)) * @grid-unit;
    }
}

.row (@columns: @grid-num-columns) {
    display: block;
    .width(@columns);
    overflow: hidden;
    
    > :first-child { margin-left: 0; }
}

.col (@columns: 1) {
    display: inline-block;
    float: left;
    .width(@columns);
    margin-left: @grid-gutter-size * @grid-unit;
}