SCSS: Basic SCSS Grid System

grid.scss

/* @group SCSS Grid */
	
$column-width: 45px;
$gutter-width: 16px;

@mixin col-width($span){
	width: ($column-width + $gutter-width) * $span - $gutter-width;
}

@mixin col-offset($span){
	margin-left: ($column-width + ($gutter-width * 2)) * $span - $gutter-width;
}

.grid {
	margin-right: -#{$gutter-width};
	
	[class*="span"] {
		float: left;
		margin-right: $gutter-width;
	}
	
	@for $i from 1 through 16 {
		.span#{$i} {
			@include col-width($i);
		}
		.offset#{$i} {
			@include col-offset($i);
		}
	}
	
}

/* @end */

structure.html

<div class="grid">
	<div class="row">
		<div class="span6">
		</div>
		<div class="span9 offset1">
		</div>
	</div>
	<div class="row">
		<div class="span8">
		</div>
		<div class="span8">
		</div>
	</div>
</div>