Responsive, syntax friendly, sass meister grid system in 101 line

101 - Grid system.scss

$grid-width:              1280px;
$gutter-width:            12px;
$columns-number:          12;
$columns-number-string:   ("one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve");
$break-small:             760px;

@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: $break-small) { @content; }
  }
}

@mixin grid-calc-helper($property, $columns) { 
  #{$property}: 100% / $columns-number * $columns;
}

@mixin grid-border-box(){
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

@mixin columns-basic(){
  float: left;
  display: block;
  padding: 0 $gutter-width/2 0 $gutter-width/2;
  position:relative;
  @include grid-border-box();
  &:after, &:before {
    @include grid-border-box();
  }
}

@mixin row(){
  @include grid-border-box();
  width: 100%;
  max-width: $grid-width;
  margin: 0 auto;  
  padding: 0 $gutter-width/2 0 $gutter-width/2;
  display: block;
  clear: both;
  .row {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  &:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  &:after, &:before {
    @include grid-border-box();
  }
}

@mixin grid-columns($columns:false, $offset:false, $mobile:false, $center:false, $gutter:true){
  @include columns-basic();
  @if $columns!= false { @include grid-calc-helper(width, $columns); }
  @if $gutter != false { padding: 0 $gutter-width/2 0 $gutter-width/2; }
  @if $offset != false { @include grid-calc-helper(margin-left, $offset); }
  @if $center != false { float:none; margin:0 auto; }
  @include respond-to(handhelds) {
    @if $mobile != false { @include grid-calc-helper(width, $mobile); }
    @else { width: 100%; }
  }
}

$allClassSelector:"";
@for $i from 1 through $columns-number {
  $allClassSelector: $allClassSelector + "&.#{nth($columns-number-string, $i)}, ";
}

.row{ @include row(); }
.columns{
  @include columns-basic();
  @for $i from 1 through $columns-number {
    &.#{nth($columns-number-string, $i)} { 
      @include grid-calc-helper(width, $i);
    }
  }
  @for $i from 1 through ($columns-number - 1) {
    &.#{offset-by}-#{nth($columns-number-string, $i)} { @include grid-calc-helper(margin-left, $i); @include respond-to(handhelds){margin-left:0;} }
  }
  @include respond-to(handhelds) {
    #{$allClassSelector} { width: 100%;}
    @for $i from 1 through $columns-number {
      &.#{mobile}-#{nth($columns-number-string, $i)} { @include grid-calc-helper(width, $i) }
    }
  }
  &.centered{
    float:none;
    margin:0 auto;
  }
  &.no-gutter{
    padding: 0;
  }
}