Simple Grid in Sass

_grid.scss

////////////////////////////////////////////
// Grid.scss

// Configs
$width:  960px;
$full:   100;

$common: 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100;
$gutter-width: 30px;

%container {
  max-width: $width;
  width: percentage($full);
  margin-right: auto;
  margin-left: auto;
  padding-bottom:3em;
  padding-left:  ($gutter-width / 2);
  padding-right: ($gutter-width / 2);
  @include clearfix();
}

%row {
  margin-bottom:1em;
  margin-left:  ($gutter-width / -2);
  margin-right: ($gutter-width / -2);
  @include clearfix();
}

////////////////////////////////////////////
// Columns and Offsets
@each $i in $common {
  $row-full: $full;
  @if ($i == 33) or ($i == 66) {
    $row-full: $full - 1;
  }

  %col-#{$i} {
    float:left;
    min-height: 1px;
    padding-left:  ($gutter-width / 2);
    padding-right: ($gutter-width / 2);
    position: relative;
    width: percentage($i / $row-full);
    @include breakpoint(xs){
      width: $full;
      padding-left: 0;
      padding-right: 0;
    }
  }
  %offset-#{$i} {
    margin-left: percentage($i / $row-full);
    @include breakpoint(xs){
      left: 0;
    }
    @include breakpoint(sm){
      left: 0;
    }
  }
}

// Portrait Tablet
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  %col-33, %col-40, %col-60, %col-66 {
    width: $full / 2;
  }
}

//////////////////////////
// Content Scaffold

main {
  @extend %container;
  >div {
    @extend %row;
    .content {
      @extend %col-100;
      article {
        @extend %col-75;
      }
      aside {
        @extend %col-25;
      }
    }
  }
}