Fluid SCSS Grid

grid.scss

$gridColumnCount: 12;
$gridGutterWidth: 40px;
$gridMaxWidth: 1400px;

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

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

@mixin container {
	@include clearfix;
	
	margin-left: auto;
	margin-right: auto;
	max-width: $gridMaxWidth;
}

@mixin gridPadding() {
	@include box-sizing(border-box);
	
	padding-left: $gridGutterWidth * .5;
	padding-right: $gridGutterWidth * .5;
}

@function gridWidth($n) {
	@return (100% * $n / $gridColumnCount);
}

@mixin gridWidth($n) {
	width: gridWidth($n);
}

@mixin grid($n, $padding: true) {
	@include gridWidth($n);
	@if $padding {
		@include gridPadding();
	}
	
	float: left;
}

@mixin noGrid($padding: true) {
	width: auto;
	float: none;
	
	@if($padding == false) {
		padding-left: 0px;
		padding-right: 0px;
	}
}

@mixin prefix($n) {
	margin-left: (100% * $n / $gridColumnCount);
}

@mixin suffix($n) {
	margin-right: (100% * $n / $gridColumnCount);
}

@mixin gridWidthSansContainer($padding: true) {
	@if $padding {
		@include gridPadding();
	}
	
	margin-left: auto;
	margin-right: auto;
	max-width: $gridMaxWidth;
}