Sass and Compass for Designers

Grids within grids

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