SCSS Grid

grid.scss

$gridgutter: 30;
$gridpadding: 30;
$gridsize: 978 + ($gridpadding*2);
$gridcolsize: (($gridsize - ($gridgutter * 11)) / 12);
.grid {
	width: 100%;
	max-width: $gridsize+px;
	margin: 0 auto;
	padding-left: $gridpadding+px;
	padding-right: $gridpadding+px;
	&:after {
		content: "";
		display: table;
		clear: both;
	}
	[class*='col-'] {
		float: left;
		min-height: 1px;
		margin-right: ((100%/$gridsize) * $gridgutter);
		position: relative;
		&:last-of-type { margin-right: 0; }
	}
	@for $i from 1 through 12 {
		.col-#{$i} {
			width: (100% / $gridsize) * ($gridcolsize*$i+($gridgutter*($i - 1)));
		}
	}
}