A responsive CSS grid system in SCSS/Compass

responsive-grid.scss

@mixin clearfix {
  &:after {
    content: " ";
    display: table;
    clear: both;
  }
}

$columns: 12;
@while $columns > 0 {
  .span-#{$columns} {
    width: percentage(0.083333 * $columns);
  }
  $columns: $columns - 1;
}

$gutter: 10px;
.row-container {
  margin: $gutter 0;
  @include clearfix;
  > div {
    border-right: $gutter solid transparent;
    border-left: $gutter solid transparent;
    float: left;
    @include clearfix;
    @include box-sizing(border-box);
  }
  &:first-child {
    border-left: none;
  }
  &:last-child {
    border-right: none;
  }
}

//This produces the following:
/*
.span-12 {
  width: 100.0%;
}

.span-11 {
  width: 91.666%;
}

.span-10 {
  width: 83.333%;
}

.span-9 {
  width: 75.0%;
}

.span-8 {
  width: 66.666%;
}

.span-7 {
  width: 58.333%;
}

.span-6 {
  width: 50.0%;
}

.span-5 {
  width: 41.667%;
}

.span-4 {
  width: 33.333%;
}

.span-3 {
  width: 25.0%;
}

.span-2 {
  width: 16.667%;
}

.span-1 {
  width: 8.333%;
}

.row-container {
  margin: 10px 0;
}
.row-container:after {
  content: " ";
  display: table;
  clear: both;
}
.row-container > div {
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.row-container > div:after {
  content: " ";
  display: table;
  clear: both;
}
.row-container:first-child {
  border-left: none;
}
.row-container:last-child {
  border-right: none;
}
*/

// Use it like this:
/*
<div class="row-container">
  <div class="span-4">
    ...content...
  </div>
  ...more columns
</div>
*/