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

Defining a context for the grid


At this point, nothing has changed. We have just imported Susy and defined the settings but we are not actually using it. To use it, we need to set one or more elements as a container element (the ‘context’ for grid columns).

Note

The importance of context

Context is an important concept to grasp when working with Susy. The context is simply the containing element for grid items. Perhaps more importantly, the number of columns that the containing element spans. For the most part, in our example we are dealing with a 12-column grid and no nesting, so the context is usually 12. However, if things start going screwy when working with grid elements, ensure you’re not inadvertently nesting a grid item within a new context. For example, if an element within a grid is also set as a container it becomes the context for any elements nested within it.

Let’s therefore amend the first section of the existing layout rules to this:

[class^=”inner”] {
  @include container...