A customized version of the 1KB CSS Grid. Now in a repo (https://github.com/heygrady/1KB-SCSS-Grid). Original article (http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/).

example1.scss

#column-a {
  @include grid-column; // make it a column
  @include grid(6); // make it 6 columns wide
}
#column-b {
  @include grid-column(6); // make it a column, 6 columns wide
}
#column-c {
  @include grid-column; // make it a column
  @include grid-plus(6, -10px); // make it 6 columns wide, minus padding
  padding: 0 5px; // mean designer broke the grid
}

grid-layout.html

  ...
  <div id="container">
    <header>
      <h1>Header</h1>
      <nav></nav>
    </header>

    <div id="main">
      <div id="left-column">Left Column</div>  
      <div id="main-column">
        <section class="hero">
          Hero Space
        </section>
        <section>
          <article id="content">Actual Content</article>
          <aside id="right-column">Right Column</aside>
        </section>
      </div>  
    </div>

    <footer>
      <p>&copy; Copyright 2010</p>
    </footer>
  </div>
  ...

grid.css

.grid-1 { width: 60px; }
.grid-2 { width: 140px; }
.grid-3 { width: 220px; }
.grid-4 { width: 300px; }
.grid-5 { width: 380px; }
.grid-6 { width: 460px; }
.grid-7 { width: 540px; }
.grid-8 { width: 620px; }
.grid-9 { width: 700px; }
.grid-10 { width: 780px; }
.grid-11 { width: 860px; }
.grid-12 { width: 940px; }

.page { width: 960px; margin: 0 auto; }
.row { width: auto; margin: 0 -10px; }
.page > .row { margin: 0; }
.column { margin: 0 10px; float: left; }
.ie6 .column { display: inline; }
.box { margin-bottom: 20px; }

grid.html

  ...
  <div id="container" class="page">
    <header class="row">
      <h1>Header</h1>
      <nav></nav>
    </header>

    <div id="main" class="row">
      <div id="left-column" class="column grid-3">Left Column</div>  
      <div id="main-column" class="column grid-9">
        <section class="hero row">
          Hero Space
        </section>
        <section class="row">
          <article id="content" class="column grid-6">Actual Content</article>
          <aside id="right-column" class="column grid-3">Right Column</aside>
        </section>
      </div>  
    </div>

    <footer class="row">
      <p>&copy; Copyright 2010</p>
    </footer>
  </div>
  ...

grid.scss

// Configuration
$column-width: 60px;
$gutter-width: 20px;
$columns: 12;

// Column Widths
@mixin grid($i) {
   width: $column-width * $i + $gutter-width * ($i - 1);
}
@mixin grid-plus($i, $plus) {
   width: $column-width * $i + $gutter-width * ($i - 1) + $plus;
}
@for $i from 1 through $columns {
  .grid-#{$i} { @include grid($i); }
}

// Page, Row, Column
@mixin grid-page($i: $columns) {
  @extend .clearfix;
   width: $column-width * $i + $gutter-width * $i;
  margin: 0 auto;
}
@mixin grid-row($page: false) {
  @extend .clearfix;
  width: auto;
  
  // rows directly inside a page don't need the negative margin
  @if $page {
    margin: 0 0;
  } @else {
    margin: 0 (-$gutter-width / 2);
    }
}
@mixin grid-column($i: false) {
  margin: 0 ($gutter-width / 2);
  float: left;
  .ie6 & { display: inline; }
  
  @if $i {
    @include grid($i);
  }
}
@mixin grid-column-empty($i: 1, $position: after) {
  $margin: $column-width * $i + $gutter-width * $i + ($gutter-width / 2);
  
  @if $position == after {
    margin-right: $margin;
  } @else {
    margin-left: $margin;
  }
}

.page {
  @include grid-page;
}
.row {
  @include grid-row;
}
.page > .row {
  margin: 0;
} 
.column {
  @include grid-column;
}

// Box
.box {
  margin-bottom: $gutter-width;
}

layout.css

#container { width: 960px; margin: 0 auto; }

#container > header, #main, #container > footer { width: auto; margin: 0 0; }

#left-column, #right-column { margin: 0 10px; float: left; width: 220px; }
.ie6 #left-column, .ie6 #right-column { display: inline; }

#main-column { margin: 0 10px; float: left; width: 700px; }
.ie6 #main-column { display: inline; }
#main-column > section { width: auto; margin: 0 -10px; }

#content { margin: 0 10px; float: left; width: 460px; }
.ie6 #content { display: inline; }

.clearfix, .page, .row, #container, #container > header, #main, #container > footer, #main > section { *zoom: 1; }
.clearfix:after, .page:after, .row:after, #container:after, #container > header:after, #main:after, #container > footer:after, #main > section:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }

layout.scss

// establishes page width and centers
#container {
  @include grid-page;
}

// main page sections
#container > header, #main, #container > footer {
  @include grid-row(true); //true indicates a row is directly inside a page
}

#left-column, #right-column {
  @include grid-column(3); //3 columns wide
}
#main-column {
  @include grid-column(9); //9 columns wide
  
  // sections in the main column are rows
  > section {
    @include grid-row;
  }
}
#content {
  @include grid-column(6); //6 columns wide
}