Quick 960 Grid with SASS

SASS Posted on

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

Seth Vargo is an engineer at Google Cloud. Previously he worked at HashiCorp, Chef Software, CustomInk, and some 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 advises non-profits.