Sass/Compass columns

_columns.scss

$total-cols: 24;
$gr: 1.61803399; // golden ratio... because why not?
$col-gutter: ($gr * 1);

.col-group {
    position: relative;
    @include pie-clearfix; // a Compass mixin. If not using Compass (that's just insane), insert other clearfix

    > .col {
        float: left;
        margin-left: ($col-gutter * 1%);

        &:first-child {
            margin-left: 0;
        }
    }
}

// 'cols-n' on parent container example markup:
// <div class="col-group cols-4">
//   <div class="col"></div>
//   <div class="col"></div>
//   <div class="col"></div>
//   <div class="col"></div>
// </div>

@for $cols from 2 through $total-cols {
    .cols-#{$cols} > .col {
        // note: try 99.9 instead of 100 if you're seeing float drop
        width: (((100 / $cols) - (($col-gutter * ($cols - 1)) / $cols)) * 1%);
    }
}


// 'span-n' on column elements example markup:
// <div class="col-group">
//   <div class="col span-4"></div>
//   <div class="col span-8"></div>
// </div>

@for $span from 1 through $total-cols {
    .col-group > .col.span-#{$span} {
        // note: try 99.9 instead of 100 if you're seeing float drop
        width: (((100 * ($span / $total-cols)) - ((($col-gutter * ($total-cols - $span))) / ($total-cols))) * 1%);
    }
}