SCSS implementation of the 960.gs grid based on the SASS version found in https://github.com/nextmat/compass-960-plugin

960grid.css.scss

$ninesixty-gutter-width: 20px !default;

$ninesixty-grid-width: 960px !default;

$ninesixty-columns: 12 !default;

$ninesixty-class-separator: "_" !default;

@mixin grid-container {
  margin-left: auto;
  margin-right: auto;
  width: $ninesixty-grid-width;
}

@mixin grid-width($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width) {
  width: $ninesixty-grid-width / $cols * $n - $gutter-width;
}

@mixin grid-unit-base($gutter-width: $ninesixty-gutter-width) {
  display: inline;
  float: left;
  margin: {
    left: $gutter-width / 2;
    right: $gutter-width / 2;
  }
}

@mixin grid($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width) {
  @include grid-unit-base($gutter-width);
  @include grid-width($n, $cols, $gutter-width);
}

@mixin alpha {
  margin-left: 0;
}

@mixin omega {
  margin-right: 0;
}

@mixin grids($cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width) {
  #{enumerate(".grid", 1, $cols, $ninesixty-class-separator)} {
    @include grid-unit-base($gutter-width);
  }
  @for $n from 1 through $cols {
    .grid#{$ninesixty-class-separator}#{$n} {
      @include grid-width($n, $cols, $gutter-width);
    }
  }
}

@mixin grid-prefix($n, $cols: $ninesixty-columns) {
  padding-left: $ninesixty-grid-width / $cols * $n;
}

@mixin grid-prefixes($cols: $ninesixty-columns) {
  @for $n from 1 through $cols - 1 {
    .prefix#{$ninesixty-class-separator}#{$n} {
      @include grid-prefix($n, $cols);
    }
  }
}

@mixin grid-suffix($n, $cols: $ninesixty-columns) {
  padding-right: $ninesixty-grid-width / $cols * $n;
}

@mixin grid-suffixes($cols: $ninesixty-columns) {
  @for $n from 1 through $cols - 1 {
    .suffix#{$ninesixty-class-separator}#{$n} {
      @include grid-suffix($n, $cols);
    }
  }
}

@mixin grid-children {
  .alpha {
    @include alpha;
  }
  .omega {
    @include omega;
  }
}

@mixin grid-move-base {
  position: relative;
}

@mixin grid-move-push($n, $cols) {
  left: ($ninesixty-grid-width / $cols) * $n;
}

@mixin grid-move-pull($n, $cols) {
  left: -($ninesixty-grid-width / $cols) * $n;
}

@mixin grid-push($n, $cols: $ninesixty-columns) {
  @include grid-move-base;
  @include grid-move-push($n, $cols);
}

@mixin grid-pull($n, $cols: $ninesixty-columns) {
  @include grid-move-base;
  @include grid-move-pull($n, $cols);
}

@mixin grid-movements($cols: $ninesixty-columns) {
  #{enumerate(".push", 1, $cols - 1, $ninesixty-class-separator)},
  #{enumerate(".pull", 1, $cols - 1, $ninesixty-class-separator)} {
    @include grid-move-base
  }
  @for $n from 1 through $cols - 1 {
    .push#{$ninesixty-class-separator}#{$n} {
      @include grid-move-push($n, $cols);
    }
    .pull#{$ninesixty-class-separator}#{$n} {
      @include grid-move-pull($n, $cols);
    }
  }
}

@mixin grid-system($cols: $ninesixty-columns) {
  @include grid-container;
  @include grids($cols);
  @include grid-prefixes($cols);
  @include grid-suffixes($cols);
  @include grid-children;
  @include grid-movements($cols);
}

@mixin grid-system-complete($cols: $ninesixty-columns) {
  .container#{$ninesixty-class-separator}#{$cols} {
    @include grid-system($cols);
  }
}

@mixin clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020"; 
        display: block; 
        height: 0; 
        overflow: hidden; 
    }
    &:after {
        clear: both;
    }
}

@mixin clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}