Useful Sass Mixins for Responsive Design, Font Sizing and More

Here at Divshot we're huge fans of Sass, a powerful CSS3 preprocessor with attitude. To quickly build our new landing page I took advantage of some nifty mixins I collected from around the web in addition to the myriad of mixins available in Compass.

Responsive Media Queries

To handle the responsive design I used Bootstrap's responsive default/fluid grids along with Sass 3.2 for content blocks inside mixins. This allows you to include blocks of CSS inside your media queries, like so:

The Sass Way has a great article on responsive design mixins written in SCSS. Here's my Sass mixin with support for phone, tablet portrait, tablet landscape, large desktop, non-retina and retina (improved thanks to Stefan Wrobel):

This mixin makes it simple to add media queries anywhere in your CSS rather than grouping the rules in one media query for each device. It's much easier to build and maintain your stylesheet this way. Look how clean the CSS looks using Sass notation:

The only possible disadvantage I've noticed is the bloat of duplicate media queries when processed to CSS. Perhaps in a future version of Sass duplicate media queries can be grouped (@buffer) and added to the generated stylesheet. Unfortunately the CSS profiler in Chrome doesn't give you any insight into media query performance so I decided to group the media queries manually in a separate stylesheet. Both stylesheets clocked in under 80ms with similar performance and file size, so luckily the difference appears to be negligible for most use cases.

Rem Font Sizing and Family Sets

Rem (root em) is a new sizing unit introduced in CSS3. Here's the difference between em and rem in a nutshell:

• Em: The size is relative to the parent element.
• Rem: The size is relative to the root element .

We've been using ems and percentage-based font-sizes to deal with IE since 2004. Now we can use the rem unit to make things a lot less confusing:

To support IE7 and IE8 we'll need to fall back to pixels. This is where a mixin comes in handy, courtesy of CSS-Tricks:

You'll notice I also included line-height to speed things up even more. So now we can use the following CSS:

Here's a basic mixin for font-family sets. Occasionally I'll use multiple Typekit font families:

Utility Mixins

If I decide not to reset margin and padding for elements such as list items right away (for whatever reason), typing out "margin: 0" and "padding: 0" can be a monotonous task. I usually rely on a snippet in TextExpander to handle this. Alternatively you can use a mixin:

When I want to hide text to make way for an icon or other graphic (image replacement) I habitually go for overflow: hidden and text-indent: -9999em. A new way via Nicolas Gallagher would be to use the following mixin:

Compass also appears to have more detailed mixins available for image replacement but pay careful attention to how it handles background images.

And that's all for now! Click here for more information on Sass mixins via the documentation.

Updates

9/24/13: Fixed post links and updated the media query mixin. Thanks Stefan Wrobel!