sassy columns

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

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

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

.column-container{
  @include clearfix;
}


@for $i from 1 through $colums {
  .col-#{$i} {
    @extend .column;
    width: 100% / $colums * $i;
  }
}

@mixin column($width: 1) {
  $base-class: $col-#{$width};
  @if #{$base-class} {
    #{$base-class} {
        @extend .column;
        width: 100% / $colums * $width;
    }
  }
  @extend #{$base-class};
}

@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;
  }