Sass Breakpoint Mixin Meets IE8

Mediacurrent Team — Thu, 08 Aug 2013 14:56:01 +0000

If you're familiar with Sass, you're probably well aware of the Breakpoint mixin and it's awesomeness. It's a tool that makes using media queries extremely easy. Instead of having to break up your CSS into large chunks by breakpoint or even into separate stylesheets, you can organize your CSS by base elements, layout, module, state, or theme. Note that these terms are not Drupal terms, for more information on how to categorize your Sass, check out the SMACSS e-book by Jonathan Snook and also this handy SMACSS template.

Enter breakpoint, which allows you to inject media queries wherever necessary. Say you are creating menu lists in the footer of your site. In a desktop view, you may want the menu blocks to sit side-by-side, but on mobile they should stack vertically. So your Sass breakpoint mixin may be something simple where you define a mobile first strategy with two breakpoints for tablet and desktop:

@import "breakpoint";
$tablet: 500px;
$desktop: 960px;

So in your code, you can utilize your breakpoint mixin like this:

.scss syntax OR

#footer .menu-block {
  width: 96%;
  margin: 0 2%;
  @include breakpoint($desktop) {
   width: 29.5%;
 }

.sass syntax (shorthand)

#footer .menu-block
  width: 96%
  margin: 0 2%
  +breakpoint($desktop)
    width: 29.5%

which will output css like this:

#footer .menu-block {
  width: 96%;
  margin: 0 2%;
}
@media (min-width: 960px) {
  #footer .menu-block {
    width: 29.5%;
  }
}

Brilliant! But... a couple things you may not have considered is 1) the effect on performance and 2) how you can use breakpoint to retrofit Internet Explorer 8.

1. Performance Considerations

As you can imagine, this method makes media queries easy to use and helps keep your Sass organized. But what about the resulting CSS? This means you will end up with media queries sprinkled throughout your CSS. Won't this make everything load slower? As it turns out, the effects on performance are almost nil. Check out this great case study at sasscast.tumblr.com to see exactly how this plays out. In the case study, a test scenario was created that included 2000 queries. In one result, all the queries were separate (which is how the breakpoint output looks) and the other where they are all combined. The resulting difference was a couple hundred milliseconds, which when you factor in caching becomes almost entirely negligible.

2. Backwards Compatibility for Older Browsers

Another problem that creeps up when using the breakpoint mixin and fragmented media queries is how to easily make a custom stylesheet for IE8 (or 7) so that these older browsers will be able to understand the queries. It is true that there are various javascript solutions like respond.js or css3-mediaqueries-js, but if you are dealing with a large site or complex caching methods... then these may not be viable options.

Why not let Sass do the work for you? After you've got your basic breakpoint mixin created, then you can create a special mixin for desktop (or whichever breakpoint is appropriate that you want to use to apply those same styles to IE8).

.scss syntax OR

@mixin desktop {
  @include breakpoint($desktop) {
    @content
  }
  .old-ie & {
    @content
  }
}

.sass syntax (shorthand)

@mixin desktop
  +breakpoint($desktop)
    @content
  .old-ie &
    @content

Then in your Sass stylesheet, use @include desktop instead of @include breakpoint(desktop). Sass will then create both the media query with the appropriate styles, and the same styles with the prefix of .old-ie (or whatever you want to name it). In reality, if you have lots of breakpoints you could create matching mixins for all breakpoints, which would make the amount of text you have to type even shorter!

See this code in action at sassmeister.com.

Finally, to bring it all together, simply add an IE conditional statement to your html so that older versions of Internet Explorer will pick up these styles. Here's an example:

<!--[if lt IE 9]> <html class="old-ie"> <![endif]-->

Now you can continue to use object-oriented Sass while keeping IE8 users happy!

UPDATE: You can take this a step farther and build in your fallbacks into your Breakpoint variable (thanks @codingdesigner!).

Additional Resources

Elegant CSS In Drupal—LESS vs Sass | Webinar

Controlling Your Site Layout Using The Mobile-First Omega Theme | Webinar

Tapping into the Drupal 7 Responsive AdaptiveTheme | Blog

Mediacurrent Team Thu, 08/08/2013 - 10:56