Much of 960 Grid System in SASS

basic_grid.sass

/*--------------------------------------------------------------------------------------*/
/* a quick way I like to use 960.gs, instead of having html classnames like .grid_5, etc.
/*-------------------------------------------------------------------------------------*/

// self-explanatory defaults
$_containerwidth: 960px
$_columns: 16
$_gutter: 10px
$_colspan: ($_containerwidth / $_columns)
$_colwidth: ( $_colspan - (2 * $_gutter))
$_gutters: 2 * $_gutter

@mixin float($side : $_floatdir, $n: 1, $alpha: false, $omega: false)
  display: inline
  float: $side
  // math adjustment for colspan > 1 to get correct width
  @if $n > 1
    width: ($n * $_colwidth) + (($n * $_gutters) - $_gutters)
  // no need for the math if colspan = 1 
  @else
    width: ($n * $_colwidth)
  // default margins
  margin-left: $_gutter
  margin-right: $_gutter
  // no margin-left, good sometimes for first columns
  @if $alpha == true
    margin-left: 0
  // no margin-right, good sometimes for last columns
  @if $omega == true
    margin-right: 0

// not a fan of clearfixes myself but most people use it, so I added it
@mixin clearfix
  clear: both
  display: block
  overflow: hidden
  visibility: hidden
  width: 0
  height: 0
  &:before,
  &:after
    content: '.'
    display: block
    overflow: hidden
    visibility: hidden
    font-size: 0
    line-height: 0
    width: 0
    height: 0
    

@mixin wrapper
  margin-left: auto
  margin-right: auto
  width: 960px
  zoom: 1
  &:before,
  &:after
    content: '.'
    display: block
    overflow: hidden
    visibility: hidden
    font-size: 0
    line-height: 0
    width: 0
    height: 0




/*
  the grid in action
*/

body
  background: #fff
  color: #000 

// wrapper
#wrapper
  @include wrapper
  
// here i'm using that "alpha" class  
#header
  @include float(left,1,true)

.yay
  @include float(left,2)

.horrah
  @include float(left,3)

// since this is the last one, i threw in the "omega" class
.wut
  @include float(left,10,false,true)









/*----------------------------------------------------------------------------------- */
/*  the SASS above outputs the following CSS
/*----------------------------------------------------------------------------------- */
body {
  background: white;
  color: black;
}

#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  zoom: 1;
}
#wrapper:before, #wrapper:after {
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

#header {
  display: inline;
  float: left;
  width: 40px;
  margin-left: 10px;
  margin-right: 10px;
}

.yay {
  display: inline;
  float: left;
  width: 100px;
  margin-left: 10px;
  margin-right: 10px;
}

.horrah {
  display: inline;
  float: left;
  width: 160px;
  margin-left: 10px;
  margin-right: 10px;
}

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