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

Seth Vargo is a Distinguished Software Engineer at LinkedIn. Previously he worked at Google, HashiCorp, Chef, 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 mentors other engineers, advises non-profits, and invests in startups.