Pre, Post, Squish, Push, and Pull

Just like the padding helpers, Susy has helper mixins to more easily administer margins within a grid. They work in a very similar manner. The helpers are called pre, post, squish, push, and pull.

Pre

The pre mixin applies margin before an element. For example, to add a column’s worth of margin before an element, you would add this mixin:

@include pre(1);

Be aware that if you add margin to an element with pre, you may need to adjust the amount of columns with the span-columns mixin. Therefore, to adjust the main content to give the same visual effect with pre instead of prefix or pad, we could write this:

.main-content {
  @include pre(1);
  @include span-columns(8 omega, 12);
}

To clarify for the people at the back not paying attention, there are 9 columns available after the chapters section; we want 1 to be used for margin and the other 8 for the content (and as the content takes up the final column we’re passing the omega argument).

Post

The post mixin does...