sassycolumns.scss

@import "compass/css3/box-sizing";
@import "compass/utilities/general/clearfix";

$colwidth: 67px;
$gutterwith: 10px;
$columns: 12;

.column {
  @include box-sizing(border-box);
  padding: 0 $gutterwith;
  float:left;
}

.column-container{
  @include clearfix;
}


@for $i from 1 through $columns {
  .col-#{$i} {
    @include column-builder($i);
  }
}

@mixin column-builder($width) {
  @extend .column;
  width: 100% / $columns * $width;
}

@mixin column($width: 1) {
  @if $width > $columns {
    @include column-builder($width);
  }
  @else if $width < 1 {
    @warn "Can't have a width less than 1!";
  }
  @else {
    @extend .col-#{$width};
  }
}

@mixin container() {
  @extend .column-container; 
}

/* tests */

// #alpha 
//    #one
//    #two
// #beta 
//    #three
//    #four
//    #five
//    #sic

  #one{
    @include column(4);
    background-color:red;
  }

  #two{
    @include column(8);
    background-color:green;
  }

  #alpha{
    @include container();
  }


  #beta{
    @include container();
  }

  #three{
    @include column(4);
    background-color:blue;
  }

  #four{
   @include column(3);
    background-color:yellow;
  }

  #five{
   @include column(5);
    background-color:red;
  }