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!

Seth Vargo is a Developer Advocate at Google. Previously he worked at HashiCorp, Chef Software, CustomInk, and a few Pittsburgh-based startups. He is the author of Learning Chef and is passionate about reducing inequality in technology. When he is not writing, working on open source, teaching, or speaking at conferences, Seth enjoys spending time with his friends and advising non-profits.