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

Using Susy grid helpers


Let’s revert to the elastic grid now and comment out those prior variables. Remember that Sass will remove comments on compile so if you would like to leave them in place (for reference), don’t feel bad about it. For clarification, here is the relative section of the _layout.scss partial that defines the grid:

// Grid layout variables (http://susy.oddbird.net/)
// ====================================================================
@import “susy”;
$total-columns  : 12;             // a 12-column grid
$column-width   : 5em;            // each column is 5em wide
$gutter-width   : 1em;            // 1em gutters between columns
$grid-padding   : $gutter-width;  // grid-padding equal to gutters
$border-box-sizing: true; 

As mentioned, Susy has a few grid helper mixins to solve common layout issues.

Prefix, Suffix, and Pad

prefix, suffix, and pad are all mixins that make adding padding before or after (or both before and after) columns simple.

Prefix

We’ve already used the...

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