Mixin based grid for LESS with scoped grid settings

grid.less

//
// Based on Semantic.gs
//

// Defaults
@columns: 12;
@gutter-width: 25px;
@total-width: 100%;

// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel
// fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
// @min-width: 960;
// @correction: 0.5 / @min-width * 100 * 1%;

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
	*zoom:1;
	
	&:before,
	&:after {
		content:"";
		display:table;
	}
	&:after {
		clear:both;
	}
}

body {
	width: 100%;
	.clearfix();
}

// Set grid definition for scope
//
// Calling this overrides any existing grid mixin definitions in a scope. It can be used
// to set the grid settings for a scope, without passing extra parameters with use of .column()
.grid(@columns: @columns, @total-width: @total-width, @gutter-width: @gutter-width) {

	// Row container to subtract outer edge padding
	// Use is completely optional, but this useful to acomodate some designs
	.row(@gutter-width:@gutter-width) {
		margin-left: -@gutter-width / 2;
		margin-right: -@gutter-width / 2;
	}

	// A container at the specified grid width, without padding
	.column-layout(@x, @columns:@columns, @total-width:@total-width, @float:left) {
		float: @float;
		width: (@total-width/@columns) * @x;
	}

	// A column size container, centered automatically by margin
	.column-centered(@x, @columns:@columns, @total-width:@total-width) {
		width: (@total-width/@columns) * @x;
		margin-left: auto;
		margin-right: auto;
	}

	// Gutter padding for a column
	.column-padding(@gutter-width:@gutter-width) {
		@padding: (@gutter-width / 2);
		padding-left: @padding;
		padding-right: @padding;
	}

	// Column with padding
	.column(@x, @columns:@columns, @gutter-width:@gutter-width, @total-width:@total-width, @float:left) {
		.column-layout(@x, @columns, @total-width, @float);
		.column-padding(@gutter-width);
	}

	// Add x columns of margin-left to the element
	.push(@x:1) {
		margin-left: (@total-width/@columns) * @x;
	}

	// Add x columns of margin-right to the element
	// This really needs a better name
	.pull(@x:1) {
		margin-right: (@total-width/@columns) * @x;
	}
}

// Clear previously applied grid styles
.reset-grid(@margin:auto) {
	display: block;
	float: none;
	width: auto;
	margin-left: @margin;
	margin-right: @margin;
}

use-examples.less

//
// Use example
// Assumes use of box-sizing: border-box
//

.grid(); // Define global grid mixins (using defaults)

&{
	.grid(6, 500px);

	.hello  {
		.column(3); // Uses 6 column, 500px, 25px

		.something {
			.grid(16, 100%, 2%);

			.column(2); // Uses 16 column, 100%, 2%
		}
	}
}

.world {
	.column(6); // Uses global definition
}


// Grid classes for cases where you just want a column size, without adding more CSS
// This should probably go in project space so that break points can be customised
.l-col-1 { .column(1) }
.l-col-2 { .column(2) }
.l-col-3 { .column(3) }
.l-col-4 { .column(4) }
.l-col-5 { .column(5) }
.l-col-6 { .column(6) }
.l-col-7 { .column(7) }
.l-col-8 { .column(8) }
.l-col-9 { .column(9) }
.l-col-10 { .column(10) }
.l-col-11 { .column(11) }
.l-col-12 { .column(12) }

.l-push-1 { .push(1) }
.l-push-2 { .push(2) }
.l-push-3 { .push(3) }
.l-push-4 { .push(4) }
.l-push-5 { .push(5) }
.l-push-6 { .push(6) }
.l-push-7 { .push(7) }
.l-push-8 { .push(8) }
.l-push-9 { .push(9) }
.l-push-10 { .push(10) }
.l-push-11 { .push(11) }
.l-push-12 { .push(12) }

@media @xs {
	.l-col-1,
	.l-col-2,
	.l-col-3,
	.l-col-4,
	.l-col-5,
	.l-col-6,
	.l-col-7,
	.l-col-8,
	.l-col-9,
	.l-col-10,
	.l-col-11,
	.l-col-12 {
		.reset-grid();
	}
}