Liquid grid in LESS

grid.less

* {

    &,
    &:after,
    &:before {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

}

[class*="grid_"] {
    float: left;
}

.grid:after {
    clear: both;
    content: "";
    display: table;
}

#grid {

    .size(@units, @columns) {

        @selector: ~".grid_@{units}of@{columns}";

        @{selector} { width: unit(@units * (100 / @columns), ~"%"); }

    }

    .loop(@index, @columns) when (@index > 0) {

        #grid > .size(@index, @columns);
        #grid > .loop(@index - 1, @columns);

    }

    .make(@columns) {

        #grid > .loop(@columns - 1, @columns);

    }

}

#grid > .make(2);
#grid > .make(3);
#grid > .make(4);
#grid > .make(5);
#grid > .make(6);
#grid > .make(8);
#grid > .make(12);