grid gradient mixin sass

grid-gradient-mixin.scss

/* Sass Mixin that generates a Baseline Grid */
/* by: Mike Morrison, Soholaunch.com */
/* You don't have to leave this credit comment in, but it would be nice of you. */

// Set your grid dimensions here
$body-width: 960px;
$baseline: 22px;
@mixin baseline-grid {
	$columns: 16;
	$column-color: rgba(200,0,0,.2);
	$baseline-color: rgba(56,255,255,.8);
	
	// These are all automatically calculated
	$gutter-width: 20px;  // Change if you like
	$gutters: ($columns - 1);
	$column-width: $body-width / $columns;
	
	background-image: -webkit-linear-gradient(0deg, $column-color $column-width, transparent $gutter-width),
							-webkit-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
	background-image: -moz-linear-gradient(0deg, $column-color $column-width, transparent $gutter-width),
							-moz-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
	background-image: -o-linear-gradient(0deg, $column-color $column-width, transparent $gutter-width),
							-o-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
	background-size: ($column-width + $gutter-width) 100%, 100% $baseline;
	background-position: 10px 0px; // Use to offset and center your grid
}

// Example call
body {
	@include baseline-grid;
}