Simplified semantic grid calculation for SASS (based on http://semantic.gs/)

example.css

#layout {
  display: block;
  width: 940px; }

#left {
  display: inline;
  float: left;
  width: 60px; }

#content {
  display: inline;
  float: left;
  width: 620px;
  margin-left: 20px; }

#right {
  display: inline;
  float: left;
  width: 220px;
  margin-left: 20px; }

#content-columns {
  display: block;
  width: 620px; }

#content-left {
  display: inline;
  float: left;
  width: 300px; }

#content-right {
  display: inline;
  float: left;
  width: 300px;
  margin-left: 20px; }

example.html

<div class="layout">
    <div class="left">
        Left column...
    </div>
    <div class="content">
        Content goes here...
        
        <div class="content-columns">
            <div class="content-left">
                More content in two columns - left...
            </div>
            <div class="content-right">
                And right...
            </div>
        </div>
    </div>
    <div class="right">
        Right column...
    </div>
</div>

example.scss

// Note that each grid has to be defined in sequence, e.g. one row() and
// then all of the col() columns inside that row - you can't interrupt
// this flow when defining nested grids.

#layout { @include row(); }
#left { @include col(1); }
#content { @include col(8); }
#right { @include col(3); }

#content-columns { @include row(8); }
#content-left { @include col(4); }
#content-right { @include col(4); }

grid.scss

// Global settings - you can override these after including this file:

$grid-col: 60px;
$grid-gutter: 20px;
$grid-cols: 12;

// Internals:

$grid-index: 0;
$grid-max: 0;

@function grid-width($span: $grid-cols) {
  @if $span > 1 {
    @return ($grid-col * $span) + ($grid-gutter * ($span - 1));
  } @else {
    @return $grid-col;
  }
}

// Mix-in to start a row (optionally with a specified total number of columns)

@mixin row($cols: $grid-cols) {
  $grid-index: 0 !global;
  $grid-max: $cols !global;
  display: block;
  width: grid-width($cols);
}

// Mix-in to add a column (optionally spanning a given number of columns) 

@mixin col($span: 1) {
  display: inline;
  float: left;
  width: grid-width($span);
  @if $grid-index > 0 {
    margin-left: $grid-gutter;
  }
  $grid-index: $grid-index + $span !global;
  @if $grid-index > $grid-max {
    @warn "grid overflow: you have #{$grid-index} total columns in the current row of #{$grid-max} columns";
  }
}

Fluid version here:

https://gist.github.com/mindplay-dk/6798866

A combined fluent/fixed grid-calculator now lives here:

https://github.com/mindplay-dk/grid-systems