As already mentioned, Susy makes it easy to create grids within grids. Let’s use this feature to space out the section of links beneath the block quote (the links to Amazon and Barnes and Noble bookstores).
We’ll separate the styles that will affect this area across two partials. We only want the _layout.scss partial to contain structural layout so we can add the Susy-related rules there:
// Grid override for purchase links
@include with-grid-settings(4,12em,1.5em,0) {
.purchase-links-wrapper {
@include container;
}
.purchase-link {
@include span-columns(1);
@include nth-omega(4n);
}
};There are a few things going on here, so let’s break that chunk of code down. First of all, we are including the with-grid-settings mixin:
@include with-grid-settings(4,8em,1.5em,0) {This lets us create a new grid, with different settings, within an existing grid. The syntax of the with-grid-settings mixin is: number of columns (4 columns in the preceding example), the...
