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. ...
Get Sass and Compass for Designers now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.