Sass semantic grid approach

grid.scss

// Defaults which you can freely override
$column-width: 60px;
$gutter-width: 20px;
$columns: 12;

// Utility function — you should never need to modify this
@function gridsystem-width($columns:$columns) {
  @return ($column-width * $columns) + ($gutter-width * $columns);
}

@mixin row($columns) {
  @include clearfix;
  display: block;
  width: gridsystem-width($columns);
  margin: 0 (($gutter-width * .5) * -1)
}

@mixin column($x) {
  display: inline;
  float: left;
  width: (($gutter-width + $column-width) * $x) - $gutter-width;
  margin: 0 ($gutter-width / 2);
}

@mixin offset($offset: 1) {
  margin-left: $offset * ($column-width + $gutter-width) + ($gutter-width / 2);
}