Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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