$gridWidth:100%; $columnCount:12; $leftGutterWidth:1%; $rightGutterWidth:1%; $gutterWidth:$leftGutterWidth + $rightGutterWidth; $columnWidth: ($gridWidth / $columnCount)-($gutterWidth); $colTotalWidth: $gridWidth + $gutterWidth; /* ============================================================================= create a row ========================================================================== */ @mixin row() { float: left; clear: both; width: $gridWidth; } /* ============================================================================= make an element span n columns ========================================================================== */ @mixin span($n: 1) { width: $n * $columnWidth + ($n - 1) * $gutterWidth; margin-right: $rightGutterWidth; margin-left: $leftGutterWidth; position:relative; @if $n == 12 { margin:0; } } /* ============================================================================= create a column div ========================================================================== */ @mixin col($n: 1) { float: left; @include span($n); } /* ============================================================================= the last column in a row needs this ========================================================================== */ @mixin last() { margin-right: 0; } /* ============================================================================= the first column in a row needs this ========================================================================== */ @mixin first() { margin-left: 0; } /* ============================================================================= prepend n blank columns ========================================================================== */ @mixin prepend($n: 1) { padding-left: ($n * $columnWidth)+($n * $gutterWidth) - $gutterWidth } /* ============================================================================= append n blank columns ========================================================================== */ @mixin append($n: 1) { padding-right: ($n * $columnWidth)+($n * $gutterWidth) - $gutterWidth } /* ============================================================================= pull n blank columns ========================================================================== */ @mixin pull($n: 1) { left: -(($columnWidth + $gutterWidth) * $n) } /* ============================================================================= push n blank columns ========================================================================== */ @mixin push($n: 1) { left: ($columnWidth + $gutterWidth) * $n } /* ============================================================================= create classes for quick prototyping ========================================================================== */ .grid { margin:0 #{-($rightGutterWidth)} 0 -#{($leftGutterWidth)}; width:$gridWidth + $gutterWidth; clear:both; .ie7 & { zoom: 1; } } @for $i from 1 through $columnCount { .span-#{$i} { @include col($i); } .colwidth-#{$i} { @include span($i); } .push-#{$i} { @include push($i); } .pull-#{$i} { @include pull($i); } .append-#{$i} { @include append($i); } .prepend-#{$i} { @include prepend($i); } } .alpha { @include first; } .omega { @include last; }