2

Quick 960 Grid with SASS

 2 years ago
source link: https://www.sethvargo.com/quick-960-grid-with-sass/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
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 an engineer at Google. 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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK