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

Get Sass and Compass for Designers now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.