SASS / SCSS Grids. It's in our blood.

So uh, we've been using those grids for as long as we know, and designers (at least here, in Indonesia) is still haven't moved on from ye old nine sixty. And writing classes sucks. So here we are, using SASS in hope to revolutionise the way people think.

Let's put on the default values first...

$columns      : 12 !default;
$printlayout  : false !default;

Give 'em some conditions...

@if $columns == 12 {
  $base : 60px; $gutter:10px;
} @else if $columns == 16 {
  $base : 40px; $gutter:10px;
} @else if $columns == 24 {
  $base : 30px; $gutter:5px;
}

Wrap it up...

.container {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

@mixin container { @extend .container; }

And put on some basic styles...

.grid {
  display:inline;
  float: left;
  position: relative;
  margin-left: $gutter;
  margin-right: $gutter;
}

Grab a bite of sandwich..

@mixin grid($n,$first:false,$last:false,$move:0,$prefix:0,$suffix:0) {
  @extend .grid;
  width: $n * $base + ( ( 2 * ( $n - 1 )  * $gutter);
  @if $first == true {
    margin-left:0;
  }
  @if $last == true {
    margin-right:0;
  }
  @if $move != 0 {
    left: ( $move * $base) + ( $move * ( 2 * $gutter ) );
  }
  @if $prefix != 0 {
    padding-left: ( $prefix * $base) + ( $prefix * ( 2 * $gutter ) );
  }
  @if $suffix != 0 {
    padding-right: ( sufefix * $base) + ( $suffix * ( 2 * $gutter ) );
  }
}

A sip of coffee...

@mixin printColums {
  @while $columns > 0 {
    .grid#{$columns} { @include grid($columns); }
    $columns: $columns - 1;
  }
}

@if $printlayout == true { @include printColums; }

Then get high :

// hey Treebeard, I thought you're a tree...

.shire {
  @include container;
  .frodo {
    @include grid(2,true);
  }
  .sam {
    @include grid($n:3,$move:2);
  }
}