simple_grid.scss

// Sass (SCSS) version of the Simpler CSS Grid system
// http://www.webdesignerwall.com/tutorials/the-simpler-css-grid/

$grid-width: 978px;

$column-width: 54px;
$column-gutter: 30px;

.grid-col {
    float: left;
    display: inline;
    margin-left: $column-gutter;
}

.container {
    width: $grid-width;
    margin: 0 auto;

    // set up .grid1 through .grid11
    @for $i from 1 through 11 {
        .grid#{$i} {
            @extend .grid-col;
        }
        @if $i == 1 {
            .grid#{$i} { width: $column-width; }
        } @else {
            .grid#{$i} { width: ($column-width * $i) + ($column-gutter * ($i - 1)); }
        }
    }

    .grid12 {
        @extend .grid-col;
	margin-left: 0;
	clear: right;
    }

    .first {
	margin-left: 0;
	clear: left;
    }
}