Responsive Web Design in Sass: Using media queries in Sass 3.2

from :


In Responsive Web Design in Sass Part 2 I wrote about using media queries in Sass 3.1. At the time, I was mostly limited to the (still very cool) @media bubbling feature. I also pointed out some of the shortcomings.

At the end of the post I previewed how you can use @content blocks, one of the emerging features of Sass 3.2, to write a mixin that can really help to simplify using media queries in Sass. With Sass 3.2 nearly upon us, I am happy to report that media queries have become the first-class citizens they deserve to be. Let’s see what’s new.

Variables in queries

If you tried to use a variable in the media query test in Sass 3.1 it would fail by simply spitting out the actual text of the variable name. This is fixed in Sass 3.2, and works pretty much as I always expected it would.

Compiles to:

Variables as full query

You’re not limited to using variables in the numerical part of a @media test. Go ahead and set the whole test as a variable. (Note the need for the interpolation braces #{})

Compiles to:

Variables on either side of the colon in a query

You can also get really abstract and set a variable for items on either side of the colon in a test. I can see this being very usefull in building flexible responsive frameworks.

Compiles to

You can also do math on a variable in a query, like so:

Compiles to

Variables in queries, using @content

In Responsive Web Design in Sass Part 2, I illustrated how to write some nicely abstracted media query systems using @content blocks in mixins. Now you can take that a step further by using variables in the actual queries. I think this will be very helpful in refining a set of breakpoints.

On my next project, I think I’ll start with some of the usual device-related breakpoints (320, 480, 720) as “placeholder” breakpoints. Then as I progress in building my design I’ll alter those to whatever values suit my design.



Nothing is Perfect

@extend within @media

There are features and optimisations I’d like to see regarding @media handling in Sass. For example @extend doesn’t behave like I’d expect when I use it in a media query.

When I write the Following in SCSS:

I intended for the generated css to look something like:

But what I really got wasn’t nearly as useful.

This is a hairy issue, and different use cases suggest different results. Eventually this may just be disallowed.

Combining @media Queries on Compile

One feature I hear a lot of people bring up with @media bubbling is that you often end up with the same query in many places in your compiled CSS. The resulting CSS would be much smaller and more closely resemble “handcrafted” CSS if all the rules that match a particular query be combined when the CSS is compiled.

It would be nice (and smaller) if that became:

But instead we get:

Nothing’s broken here, but it’s certainly not optimal. I think this would be a great issue to tackle, and it looks like there are some other smart optimisations they’re considering.

So go get it!

As before, you don’t have to work hard to get the new good stuff. Just run the following in your command line and you’re all set.

gem install sass --pre

April 9, 2012 ~ IntermediateGuides and TutorialsMason Wendell


您的电子邮箱地址不会被公开。 必填项已用 * 标注