Generate multiple grids for use in different media queries with an SCSS grid generator. Utilizes %placeholder selectors to keep these classes out of the final CSS document.

grid.scss

/* 
// Generate default grid
//
$total-columns: 12;
$column-width: 60px;
$gutter: 24px;
$column-name: span;
$normal-width: ($total-columns * $column-width) + (($total-columns - 1) * $gutter); // use for media query
@include grid-generator($total-columns, $column-width, $gutter, $column-name);

Produces a nestable grid:
<div class="span-container">
  <div class="row">
		<div class="span-4">
			4 columns
		</div>
		<div class="span-6">
			<div class="row">
				<div class="span-3">
					span 3 columns
				</div>
				<div class="span-3">
					span 3 columns
				</div>
			</div>
		</div>
		<div class="span-2">
			2 columns
		</div>
	</div> <!-- /.row -->
</div> <!-- /.container -->
*/
@mixin grid-generator($total-columns: 12, $column-width: 72px, $gutter: 30px, $column-name: span, $spacing: -10px, $inline: false) {
	
	// If it's not a fluid grid
	@if unit($column-width) == 'px' {

		%#{$column-name}-container { 
			width: ( ($total-columns * $column-width) + (($total-columns) * $gutter) );		
			/**
			 * 1. Allow the grid system to be used on lists.
			 * 2. Remove any margins and paddings that might affect the grid system.
			 * 3. Apply a negative `margin-left` to negate the columns’ gutters.
			 * 4. Remove whitespace caused by `inline-block` elements.
			 */
			list-style:none;                /* [1] */
			margin:0;                       /* [2] */
			padding:0;                      /* [2] */
			margin-left:-$gutter;           /* [3] */
			zoom:1;
		    
		    &:before,
		    &:after{
		        content:" ";
		        display:table;
		    }
		    
		    &:after{
		        clear:both;
		    }

			@if $inline {
				/**
				 * 1. Allow the grid system to be used on lists.
				 * 2. Remove any margins and paddings that might affect the grid system.
				 * 3. Apply a negative `margin-left` to negate the columns’ gutters.
				 * 4. Remove whitespace caused by `inline-block` elements.
				 */
				list-style:none;                /* [1] */
				font-size: 1px;
				letter-spacing: $spacing;
				word-spacing: $spacing;
			} 
		}


		@for $column-count from 1 through $total-columns {
			%#{$column-name}-#{$column-count} {
				width: $column-count * $column-width + ($column-count - 1) * $gutter;
				margin-left: $gutter;

				@if $inline {
					/**
					 * 1. Cause columns to stack side-by-side.
					 * 2. Space columns apart.
					 * 3. Align columns to the tops of each other.
					 * 4. Reinstate removed whitespace.
					 * 5. Required to combine fluid widths and fixed gutters.
					 */
					display:inline-block;           /* [1] */
					padding-left: 0;
					vertical-align:top;             /* [3] */
					letter-spacing:normal;          /* [4] */
					word-spacing:normal;            /* [4] */
					font-size: medium;
				} @else {
					float: left;
				}
			}
		}

		// separate these out so they override the above
		$column-counter: 1;
		@while $column-counter < $total-columns {
			%#{$column-name}-push-#{$column-counter} {
				margin-left: $column-counter * $column-width + $column-counter * $gutter + $gutter;
			}

			%#{$column-name}-pull-#{$column-counter} {
				margin-left: ($column-counter * $column-width + $column-counter * $gutter + $gutter) * -1;
			}

			$column-counter: $column-counter + 1;
		}
	} @else if unit($column-width) == '%' {

		%#{$column-name}-container { 
			width: 100% + $gutter;
			margin:0;
			padding:0;
			margin-left:-$gutter; 
			zoom:1;
			list-style: none;
		    
		    &:before,
		    &:after{
		        content:" ";
		        display:table;
		    }
		    
		    &:after{
		        clear:both;
		    }

			@if $inline {
				/**
				 * 1. Allow the grid system to be used on lists.
				 * 2. Remove any margins and paddings that might affect the grid system.
				 * 3. Apply a negative `margin-left` to negate the columns’ gutters.
				 * 4. Remove whitespace caused by `inline-block` elements.
				 */
				list-style:none;                /* [1] */
				font-size: 1px;
				letter-spacing: $spacing;
				word-spacing: $spacing;
			} 
		}


		@for $column-count from 1 through $total-columns {
			%#{$column-name}-#{$column-count} {
				width: percentage($column-count / $total-columns);
				padding-left: $gutter; 

				@if $inline {
					/**
					 * 1. Cause columns to stack side-by-side.
					 * 2. Space columns apart.
					 * 3. Align columns to the tops of each other.
					 * 4. Reinstate removed whitespace.
					 * 5. Required to combine fluid widths and fixed gutters.
					 */
					display:inline-block;           /* [1] */
					padding-left: 0;
					vertical-align:top;             /* [3] */
					letter-spacing:normal;          /* [4] */
					word-spacing:normal;            /* [4] */
					font-size: medium;
				} @else {
					float: left;
				}
			}
		}

		// separate these out so they override the above
		
		$column-counter: 1;
		@while $column-counter < $total-columns {
			%#{$column-name}-push-#{$column-counter} {
				margin-left: $column-counter * $column-width + $column-counter * $gutter + $gutter;
			}

			%#{$column-name}-pull-#{$column-counter} {
				margin-left: ($column-counter * $column-width + $column-counter * $gutter + $gutter) * -1;
			}

			$column-counter: $column-counter + 1;
		}
	}
}