Sass and Compass for Designers

Setting up a Susy grid

When setting up a Susy grid, the first thing we will do is include all the necessary Susy-specific variables for the grid. Let’s add the following at the top of the _layout.scss partial:

@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

First, we are importing Susy using the @import directive and then defining some settings for a grid as values next to the various Susy variables. Let’s look at each of these:

• $total-columns: This is the number of columns we want our grid to have. Here we are using a 12-column grid but it can be any number of columns you like. ...