Reader small image

You're reading from  Sass and Compass for Designers

Product typeBook
Published inApr 2013
Reading LevelBeginner
Publisher
ISBN-139781849694544
Edition1st Edition
Languages
Tools
Concepts
Right arrow
Author (1)
Ben Frain
Ben Frain
author image
Ben Frain

Ben Frain has been a web designer/developer since 1996. He is currently employed as a UI-UX Technical Lead at bet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures: playing indoor football while his body and wife still allow it and wrestling with his two sons.
Read more about Ben Frain

Right arrow

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...
lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
Sass and Compass for Designers
Published in: Apr 2013Publisher: ISBN-13: 9781849694544

Author (1)

author image
Ben Frain

Ben Frain has been a web designer/developer since 1996. He is currently employed as a UI-UX Technical Lead at bet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures: playing indoor football while his body and wife still allow it and wrestling with his two sons.
Read more about Ben Frain