By Steve Hickey for Launch Academy Intro to SASS Building a Flexible Grid System 

Hi, I’m Steve. I design & code applications for Fresh Tilled Soil. 

What does SASS allow us to do? 1. Use variables in our CSS 2. Nest selectors for organization 3. Modularize with partials, mixins & functions 4. Extend/inherit style rules 5. Perform math on properties 

user@machine:~ $ sudo gem install sass See sass-lang.com/install for other options. Install 

File structure 

@import 'bourbon/bourbon'; @import 'reset'; @import 'variables'; @import 'mixins'; @import 'grid'; @import 'type'; @import 'forms'; @import 'global'; @import 'helpers'; Any filename that starts with an _ is a partial, and SASS won’t output it. The one file without an _ is what SASS watches. It imports all the partials and outputs a single CSS file. You can output multiple files if you want to. 

user@machine:~ $ cd into/root-of-repo user@machine:~ $ sass --watch css/sass:css The terminal can compile SASS to CSS whenever a file is altered and saved. See sass-lang.com and RTFM for more options. Compile 

Variables $primary-color: #049cdb; // blue $heading-typeface: Arial, sans-serif; $modular-scale-base: 1 // 16px $modular-scale-up1: 1.4375; // 22px /* ===================================== */ h2.article-title { color: $primary-color; font-family: $heading-typeface; line-height: $modular-scale-base; font-size: #{$modular-scale-up1}em; } /* ===================================== */ h2.article-title { color: #049cdb; font-family: Arials, sans-serif; line-height: 1; font-size: 1.4375em; } Store and reuse information in your stylesheets. Pro-tip: this feature alone makes SASS worth it. 

Nesting nav.global { width: 100%; a { background-color: #ddd; &:hover { background-color: #aaa; } } /* ===================================== */ nav.global { width: 100%; } nav.global a { background-color: #ddd; } nav.global a:hover { background-color: #aaa; } You can keep your code well organized while outputting proper selectors. Obey the Inception Rule. Try not to nest much deeper than 3 levels. 

Mixins @mixin border-radius($radius: 4px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } /* ===================================== */ .container { @include border-radius(8px); } /* ===================================== */ .container { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } Mixins create a group of styles that can accept arguments and be reused. 

Extend .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } /* ===================================== */ .message, .success { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border-color: green; } This allows you to share properties and avoid having to repeat yourself. 

Operators article { float: left; width: (600px / 960px) * 100%; } aside { float: right; width: (300px / 960px) * 100%; } /* ===================================== */ article { float: left; width: 62.5%; } aside { float: right; width: 31.25%; } SASS allows simple math in your CSS, preserving your original units. This is not like calc() in CSS. You must use similar units. 

Functions @function flex-width($target, $context) { @return ($target / $context) * 100%; } /* ===================================== */ article { float: left; width: flex-width(600px, 960px); } aside { float: right; width: flex-width(300px, 960px); } /* ===================================== */ article { float: left; width: 62.5%; } aside { float: right; width: 31.25%; } Determine your style rules programmatically and reuse the methods. 

Let’s build a grid. 

Grids can be difficult to do well on the web. This is why we have so many frameworks, but they have issues. /* ===================================== */ .row { margin-left: -20px; } .row:before, .row:after { display: table; line-height: 0; content: ""; } .row:after { clear: both; } .span4 { width: 300px; } 

Our markup will be clean and use (mostly) semantic class names. Functions can be used to calculate all of the properties we need. Mixins can be used to attach our styles to semantic class names. 

Here’s the grid we’ll use. Because math is hard. * Borrowed from Elliot Jay Stocks 

We’ll store the grid’s important details in some SASS variables. $max-width: 1000px; $column-width: 15%; $gutter: 2%; $max-columns: 6; 

Then we’ll create a set of helpful mixins. They have use beyond our grid system and should be defined globally. @mixin clearfix { zoom: 1; &:before, &:after { content: ""; display: table; } &:after { clear: both; } } @mixin border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

@function columns($columns, $parent: $max-columns) { $width: $columns * $column-width + ($columns - 1) * $gutter; $parent-width: $parent * $column-width + ($parent - 1) * $gutter; @return percentage($width / $parent-width); } // Borrowed and modified from Bourbon.io Now, the fun stuff. This function uses our variables to figure out flexible column widths. 

And this function helps us get the correct width for gutters. @function gutter($parent: $max-columns) { $parent-width: $parent * $column-width + ($parent - 1) * $gutter; @return percentage($gutter / $parent-width); } // Borrowed and modified from Bourbon.io 

We’ll use these functions on elements like so: div.parent { width: columns(3); margin-right: gutter(); div.child { width: columns(1, 3); margin-right: gutter(3); } } /* ===================================== */ div.parent { width: 49%; margin-right: 2%; } div.parent div.child { width: 30.61224%; margin-right: 4.08163%; } And they’ll output this: 

A full grid system needs a few more behaviors. This mixin helps to control nesting elements. @mixin nesting($children: div) { padding: 0; & > #{$children} { float: left; margin-right: gutter; @include border-box; } } 

And this one tells elements to behave like rows. @mixin row { width: 100%; max-width: $max-width; margin: 0 auto; @include clearfix; @include nesting; } 

For more advanced layouts this function will calculate horizontal element offsets. @function offset-columns($columns) { $margin: $columns * $column-width + $columns * $gutter; @return $margin; } 

And we can apply it using our offset mixin. @mixin offset($from-direction: left, $columns) { @if $from-direction == left { float: left; margin-left: offset-columns($columns); } @if $from-direction == right { float: right; margin-right: offset-columns($columns); } } 

The last element in a row is an infuriating problem. The best solution is simple, but inelegant. @mixin last { margin-right: 0; float: right; } 

Note: I tried :last-child, :first-child and :nth-child(). They would be good solutions, but support is bad or intent is wrong. 

github.com/freshtilledsoil/launch-academy-sass-grid The Final Product 

Thanks! @stevehickeydsgn stevehickeydesign.com freshtilledsoil.com