Sass and Compass for Designers

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