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.$column-width: This is the width of each column in the grid. We are usingemas a unit of measurement here but it could be defined as pixels if you would rather; Susy won’t mind.$gutter-width: Defines the...