Simple Responsive Grid With SCSS

It is really simple to create your own grid with SCSS. Take a look at this tip!

// Variables
$cols: 12;
$max-wrapper-width: 920px;
$gutter-width: 20px;

// Mixin
@mixin col($col) {
  width: (($max-wrapper-width - $gutter-width*($cols/$col - 1))/($cols/$col))/$max-wrapper-width*100%;
}

// Loop to create the grid
@for $i from 1 through 12 {
  .l-col-#{$i} {
    @include col($i);
  }
}

Demo
http://jsfiddle.net/xmf4j/