An Introduction to Sass in Responsive Design

I’ve been wanting to explore CSS pre-processors for several months and re-building this site seems like a good chance to get my feet wet. I’ve been following the debates between the two most popular pre-processors, Sass and LESS, and decided that for my purposes and experience, Sass would be a better fit (Chris Coiyer has an excellent comparison of Sass vs LESS over on CSS Tricks).

Using a workflow that I learned in the Build Responsively Workshop, I wanted to create separate .scss partials for each of my breakpoints, then import them into my main stylesheet using media queries and @import statements within my main Sass stylesheet (style.scss). Normally I avoid @import statements in my CSS files (which would prevent stylesheets from being downloaded in parallel), but the compiled nature of Sass means that the only time these files are actually imported is when the actual CSS files are generated. Importing multiple Sass partials also a) keeps my styles organized better (with no performance hit) and b) allows me to easily re-use partials for alternative stylesheets.

A practical example

Let’s say we’re supporting an older browser that doesn’t support media queries (for instance, any version of Internet Explorer prior to 9). If we’re using a “mobile-first” approach to responsive design (load the styles for the smallest resolution first, then work up via media queries), that means that a browser that doesn’t support media queries would only load (or render) the styles for the smallest screen. Using Sass partials, it’s a snap to make a stylesheet for IE8 and below all while keeping our code nice and DRY.

If we look at the styles directory for this site, I have two SCSS files: style.scss and ie8.scss.

You can see that the only real difference between the two files is that ie8.css lacks media queries – I progressively load each of the Sass partials that would normally be loaded via media query (remembering that the styles from _base.scss should always be present in style.scss since they don’t depend on media queries), then include any overrides necessary for IE8 and below (for this particular site, there’s only one – fixing the width of #wrapper to 960px).

The results:

• Modern browsers: Download a single stylesheet with all of the necessary styles, applying media queries where appropriate
• Internet Explorer 8 and below: Download two stylesheets – one with the base styles and a bunch of CSS that it can’t parse (since it doesn’t understand media queries), then a second stylesheet that fills in the blanks.

This solution certainly favors modern browsers (IE8’s hit with an extra HTTP request and forced to download what’s essentially the same set of styles twice), so mileage on this technique will vary by your audience. If you’re dealing with lots of stylesheets and a large percentage of visitors on old browsers, you may want to consider alternate arrangements for your CSS (remember: conditional comments can be used to exclude browsers as well as include them – you could use the same set of partials but serve one compiled stylesheet to IE <= 8 and an entirely different file to visitors using more modern browsers.

Serving an entirely separate stylesheet to Internet Explorer 8 and below

First, start by importing _base.scss into your IE8 stylesheet:

Then use conditional comments to load different styles for IE8 than other browsers:

Whichever solution you choose, Sass allows you to write your styles in one place (the Sass partials) and load them as needed, which helps keep your codebase more organized and easier to maintain.

Wrapping up

I’ve shown you one way of organizing and two ways to handle loading Sass files in responsive design, but these are certainly not the only ways to go about it. How are you using CSS pre-processors to keep your responsive site styles maintainable?