960 Grid System Using Sass.

_grid.scss

/*!
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/

Licensed under GPL and MIT.
 */

// Containers
//----------------------------------------------------------------------------------------------------
@mixin grid-container($contentWidth, $gutterWidth) {
  margin-left: auto;
  margin-right: auto;
  width: $contentWidth + $gutterWidth;
}

// Grid >> Global
//----------------------------------------------------------------------------------------------------
@mixin grid-base($gutterWidth) {
  display:inline;
  float: left;
  position: relative;
  margin-left: $gutterWidth / 2;
  margin-right: $gutterWidth / 2;
}

// Grid >> Children (Alpha ~ First, Omega ~ Last)
//----------------------------------------------------------------------------------------------------

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

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

// Grid >> Columns
//----------------------------------------------------------------------------------------------------

@mixin grid($span, $contentWidth, $numberOfColumns, $gutterWidth) {
  @include grid-base($gutterWidth);
  width: ($contentWidth + $gutterWidth - $gutterWidth * $numberOfColumns) / $numberOfColumns * $span + ($span - 1) * $gutterWidth ;
}

style.css

/*!
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/

Licensed under GPL and MIT.
 */
.wrap {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

.box1 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 60px;
}

.box2 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 140px;
}

.box3 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

.box4 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 300px;
}

.box5 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 380px;
}

.box6 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 460px;
}

.box7 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 540px;
}

.box8 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 620px;
}

.box9 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 700px;
}

.box10 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 780px;
}

.box11 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 860px;
}

.box12 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  width: 940px;
}

style.scss

@import "grid";

$contentWidth: 940px;
$numberOfColumns: 12;
$gutterWidth: 20px;

.wrap {
  @include grid-container($contentWidth, $gutterWidth);
}

.box1 {
  @include grid(1, $contentWidth, $numberOfColumns, $gutterWidth);
}

.box2 {
  @include grid(2, $contentWidth, $numberOfColumns, $gutterWidth);
}

.box3 {
  @include grid(3, $contentWidth, $numberOfColumns, $gutterWidth);
}

.box4 {
  @include grid(4, $contentWidth, $numberOfColumns, $gutterWidth);
}

.box5 {
  @include grid(5, $contentWidth, $numberOfColumns, $gutterWidth);
}

.box6 {
  @include grid(6, $contentWidth, $numberOfColumns, $gutterWidth);
}

.box7 {
  @include grid(7, $contentWidth, $numberOfColumns, $gutterWidth);
}

.box8 {
  @include grid(8, $contentWidth, $numberOfColumns, $gutterWidth);
}

.box9 {
  @include grid(9, $contentWidth, $numberOfColumns, $gutterWidth);
}

.box10 {
  @include grid(10, $contentWidth, $numberOfColumns, $gutterWidth);
}

.box11 {
  @include grid(11, $contentWidth, $numberOfColumns, $gutterWidth);
}

.box12 {
  @include grid(12, $contentWidth, $numberOfColumns, $gutterWidth);
}