Quick 960 Grid with SASS

960 used to be hard. I just did it in like 10 minutes. Thought I'd share...

Using SASS, we can quickly create a nice little span#{i} loop:

$content-width: 960px;

#content {
  width: $content-width;

  .row {
    clear: both;
    width: 100%;

    /* span1 - span10 */
    $spacing: 16px; // must be an even number
    $padding: 10px;
    $spans: 10;

    @for $i from 1 through $spans {
      .span#{$i} {
        float: left;
        margin: $spacing $spacing/2 0 $spacing/2;
        padding: $padding;
        width: $content-width/($spans/$i) - $spacing - $padding*2;
      }
    }
  }
}

Essentially it's just math, but we are looping 1-10 and creating a span for each of that division. Then, we subtract the margin and padding (all dynamic variables) and we have a pretty nifty generator. You can change the loop and make as many spans as you want!

About Seth