Sass and Compass for Designers

Using Susy grid helpers

Let’s revert to the elastic grid now and comment out those prior variables. Remember that Sass will remove comments on compile so if you would like to leave them in place (for reference), don’t feel bad about it. For clarification, here is the relative section of the _layout.scss partial that defines the grid:

// Grid layout variables (http://susy.oddbird.net/)
// ====================================================================
@import “susy”;
$total-columns  : 12;             // a 12-column grid
$column-width   : 5em;            // each column is 5em wide
$gutter-width   : 1em;            // 1em gutters between columns
$grid-padding   : $gutter-width;  // grid-padding equal to gutters
$border-box-sizing: true; 

As mentioned, Susy has a few grid helper mixins ...