960_12_col.sass

$width: 960px
$numCols: 12
$gutterWidth: 10px
$colWidth: ($width/$numCols) - (2*$gutterWidth)

.container_#{$numCols}
  margin-left: auto
  margin-right: auto
  width: $numCols * ($colWidth+(2*$gutterWidth))

@for $i from 1 through $numCols
  .container_#{$numCols}
    .grid_#{$i}
      width: ($i * $colWidth) + (($i - 1)*(2*$gutterWidth))
      float: left
      display: inline
      margin:
        left: $gutterWidth
        right: $gutterWidth
    @if $i < $numCols
      $move: ($i * $colWidth) + ($i * 2 * $gutterWidth)
      .prefix_#{$i}
        padding-left: $move
      .suffix_#{$i}
        padding-right: $move
      .pull_#{$i}
        position: relative
        left: -$move
      .push_#{$i}
        position: relative
        left: $move

.clearfix, .container_#{$numCols}
  &:before, &:after
    content: '.'
    display: block
    overflow: hidden
    visibility: hidden
    font-size: 0
    line-height: 0
    width: 0
    height: 0

.clearfix, .container_#{$numCols}
  zoom: 1

.clearfix:after, .container_#{$numCols}:after
  clear: both

.bottom
  margin-bottom: 1.5em


.container_#{$numCols} .alpha
  margin-left: 0

.container_#{$numCols} .omega
  margin-right: 0


.clear
  clear: both
  display: block
  overflow: hidden
  visibility: hidden
  width: 0
  height: 0

// @for $i from 1 through $numCols
//   .color_#{$i}
//     background-color: darken(#B4FFA1, 4*$i)
//     width: $i*10px