GridLESS - a simple grid generator in {LESS}

grid.css

/* Example Output */
[class*="grid_"] { float: left; margin-right: 2.127659574468086%; *zoom: 1; }
[class*="grid_"]:before, [class*="grid_"]:after { content: "";  display: table; }
[class*="grid_"]:after { clear: both; }
.omega { margin-right: 0; }
.grid_12 { width: 100%; }
.push_12 { margin-left: 102.12765957446808%; }
.grid_11 { width: 91.48936170212767%; }
.push_11 { margin-left: 93.61702127659575%; }
.grid_10 { width: 82.97872340425533%; }
.push_10 { margin-left: 85.10638297872342%; }
.grid_9 { width: 74.46808510638299%; }
.push_9 { margin-left: 76.59574468085107%; }
.grid_8 { width: 65.95744680851064%; }
.push_8 { margin-left: 68.08510638297872%; }
.grid_7 { width: 57.4468085106383%; }
.push_7 { margin-left: 59.57446808510638%; }
.grid_6 { width: 48.93617021276596%; }
.push_6 { margin-left: 51.06382978723404%; }
.grid_5 { width: 40.425531914893625%; }
.push_5 { margin-left: 42.55319148936171%; }
.grid_4 { width: 31.914893617021278%; }
.push_4 { margin-left: 34.04255319148936%; }
.grid_3 { width: 23.404255319148938%; }
.push_3 { margin-left: 25.531914893617024%; }
.grid_2 { width: 14.893617021276597%; }
.push_2 { margin-left: 17.021276595744684%; }
.grid_1 { width: 6.382978723404255%; }
.push_1 { margin-left: 8.51063829787234%; }

.container { margin: 0 auto; }
@media screen and (max-width: 480px) { .container { width: 92%; }}
@media screen and (min-width: 480px) { .container { width: 460px; }}
@media screen and (min-width: 640px) { .container { width: 600px; }}
@media screen and (min-width: 960px) { .container { width: 920px; }}
@media screen and (min-width: 1200px) { .container { width: 1080px; }}

grid.less

// GridLESS
// Initial settings ~ 960 grid (12x60px cols, 20px guts)
@columnWidth: 6.3829787234042553191489%;
@columns: 12;
@gutterWidth: (100% - @columnWidth * @columns) / (@columns - 1);

// The micro clearfix
.clearfix() {
  &:before, &:after { content: ""; display: table; }
	&:after { clear: both; }
}

// Apply cf to all grid_* at once
[class*="grid_"] { float: left; margin-right: @gutterWidth; .clearfix; }
.omega { margin-right: 0; }

// Grid Generator
.GridGenerator (@index) when (@index > 0) {
	(~".grid_@{index}") { width: ((@index * @columnWidth) + ((@index - 1) * @gutterWidth)); }
	(~".push_@{index}") { margin-left: ((@index * @columnWidth) + ((@index - 1) * @gutterWidth) + @gutterWidth); }
	.GridGenerator(@index - 1);
}
.GridGenerator(0) {} // Stop on 0
.GridGenerator(@columns); // Make the grid

// container styles, override breakpoints as needed
.container { margin: 0 auto; }
@media screen and (max-width: 480px) { .container { width: 92%; }}
@media screen and (min-width: 480px) { .container { width: 460px; }}
@media screen and (min-width: 640px) { .container { width: 600px; }}
@media screen and (min-width: 960px) { .container { width: 920px; }}
@media screen and (min-width: 1200px) { .container { width: 1080px; }}