Quick 960 Grid with SASS
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.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK