Creating a Flexible Grid System using Compass / SCSS

Let's start by using an existing static grid system

$width: 940;
$column: 60;
$gutter: 20;
$column-count: 12;

$mobile: 767px;

Next create a mixin that will setup the column and gutter width

@mixin grid-span($span){ 
    $flex-column: percentage($column/$width);
    $flex-gutter: percentage($gutter/$width);
    float: left;
    width: ($flex-column * $span) + ($flex-gutter * ($span - 1));
    margin-left: $flex-gutter;
    &:first-child{
        margin-left: 0;
    }
    @media screen and (max-width:$mobile) {
        width:auto;
        float:none;
        margin-left:0;
    }
}

Next run through a loop to create all our grid column classses

@for $counter from 1 to $column-count {
    .span#{$counter} {
        @include grid-span($counter);
    }
}

Let's create a placeholder for clearfix

%clearfix{
    *zoom:1;
    &:after, &:before{
        display: table;
        line-height: 0;
        content: "";
    }
    &:after{
        clear: both;
    }
}

Let's create a placeholder for clearfix

.grid-row{
    width: 100%;
    @extend %clearfix;
}

Here's a version of this that I did earlier.