Sass and Compass for Designers

Making breakpoints with Susy

With Susy you can have as many breakpoints as you need. However, rather than try and remember the various widths for the breakpoints in ems or pixels, let’s make a couple of variables, one called $M (for medium-sized viewport widths) and the other called $L for larger ones. We’ll add these in the _layouts.scss partial below the other Susy settings:

// Breakpoint variables
// ====================================================================
$M: 47em; // roughly speaking, around 750px wide with 16px body font
$L: 75em; // roughly speaking, around 1200px wide with 16px body font

Remember that our first layout will actually be the absence of media queries: that’s our ‘accessibility’ layout. With these two variables we ...