SASS implementation of 960 grid system

grid.sass

$column_width: 30;
$gutter_width: 10;

@mixin container($columns) {
	margin-left: auto;
	margin-right: auto;
	width: #{($columns * ($column_width + $gutter_width))}px;
}

@mixin alpha-column {
  margin-left: 0;
}

@mixin omega-column {
  margin-right: 0;
}

@mixin grid($columns) {
  display: inline;
  float: left;
  position: relative;
  margin: {
    left: #{$gutter_width / 2}px;
    right: #{$gutter_width / 2}px;
  };
  width: #{($column_width * $columns) + ($gutter_width * ($columns - 1))}px;
}

@mixin prefix($columns) {
  padding-left: #{($column_width + $gutter_width) * $columns}px;
}

@mixin suffix($columns) {
  padding-right: #{($column_width + $gutter_width) * $columns}px;
}

@mixin push($columns) {
  left: #{($column_width + $gutter_width) * $columns}px;
}

@mixin pull($columns) {
  left: -#{($column_width + $gutter_width) * $columns}px;
}

Just a heads up you can do math on variables that are declared like this:

$gutter_width: 10px;

No need to do the concatenation of "px" manually.

Woah that's sick! I'll have to fix that up. Thanks for the tip!

No problem.

Here's my version: http://gist.github.com/607088.

Two changes: 1) using 'px' in variable declarations and 2) simpler math by making $column_width include 1 gutter.