Simple SASS @mixin-based grid system

_grid.scss

/**
* Grid helpers
*
* @section Framework
* @author ljd
*/
$grid-columns: 16;
$grid-gutter-width: $base-line-height;
$grid-col-width: percentage(1/$grid-columns);

// Generic helper for creating grid widths
@function grid-col-width($cols) {
	@return $grid-col-width * $cols;
}


// Common styles that can be hoisted without problems
%grid__row {
	margin-left: - $grid-gutter-width / 2;
	margin-right: - $grid-gutter-width / 2;
}

%grid__col--padding {
	padding-left: $grid-gutter-width / 2;
	padding-right: $grid-gutter-width / 2;
}




// Mixins makes for easy includes in modules. Some styles are mixed in directly, so they can be easily overwritten in @media queries.
@mixin grid-col($cols, $padding: true) {
	float: left;
	width: grid-col-width($cols);

	@if ($padding) {
		@extend %grid__col--padding;
	}
}

@mixin grid-push($cols) {
	margin-left: grid-col-width($cols);
}

@mixin grid-row($margin: true) {
	@if ($margin) {
		@extend %grid__row;
	}
	&:after {
		@extend %clearfix;
	}
}