SCSS grid system using box-sizing

grid.scss

$columnCount: 12;
$columnWidth: 64px;
$gutterWidth: 20px;

@mixin clear {
	&::after {
		content: "";
		width: 100%;
		height: 0px;
		display: block;
		clear: both;
	}
}

@mixin container {
	@include clear;
	
	width: $columnCount * ($columnWidth + $gutterWidth);
	margin: 0px auto;
}

@mixin grid($n) {
	@include box-sizing(border-box);
	
	padding-left: $gutterWidth * .5;
	padding-right: $gutterWidth * .5;
	width: $n * ($columnWidth + $gutterWidth);
	float: left;
}

@mixin prefix($n) {
	margin-left: $n * ($columnWidth + $gutterWidth);
}

@mixin suffix($n) {
	margin-right: $n * ($columnWidth + $gutterWidth);
}