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).

The post mixin does...