Simple grid

gistfile1.sass

$container-width: 960;
$num-columns:     24;
$column-width:    30;
$gutter-width:    ($container-width - $num-columns * $column-width) / $num_columns;

$container-px-width:  $container-width * 1px;
$column-px-width:     $column-width * 1px;
$column-pct-width:    ($column-width / $container-width) * 100%;
$gutter-px-width:     $gutter-width * 1px;
$gutter-pct-width:    ($gutter-width / $container-width) * 100%;

@mixin container {
  width: 90%;
  max-width: $container-px-width + $gutter-px-width;
  margin: 0 auto;

  /* Keep the container centered. */
  position: relative;
  left: $gutter-pct-width / 2;
  @include clearfix;
}

@mixin cols($cols:$num-columns) {
  width: $column-pct-width * $cols + $gutter-pct-width * ($cols - 1);
  margin-right: $gutter-pct-width;
  float: left;

  @media screen and (max-width: 480px) {
    width: 100% - $gutter-pct-width;
    margin-bottom: 1em;
  }
}

@mixin respond-480($cols) {
  @media screen and (max-width: 480px) { @include cols($cols); }
}

@mixin respond-760($cols) {
  @media screen and (max-width: 760px) { @include cols($cols); }
}

@mixin respond-960($cols) {
  @media screen and (max-width: 960px) { @include cols($cols); }
}