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 to solve common layout issues.
prefix, suffix, and pad are all mixins that make adding padding before or after (or both before and after) columns simple.