But you might want to do that tons and tons of times in your CSS, because of how awesomely convient and how much sense it makes while authoring (rather than clump them all at the end which breaks cognitive connections).

Now you are stuck repeating yourself a bunch, which is exactly what Sass tries to help us not do. In Sass 3.2 (which is in alpha and has been for a long time) there is a solution. We can write a @mixin which will allow us to "name" media queries.

I:

Like calling media queries "breakpoints"

Don't like the idea of naming them after anything specific, like "iPad"

And it will work just how I want. Cool eh? (Note: that's totally arbitrary code to illustrate the point, usage depends on the project)

But what if you use CodeKit?

CodeKit, rightly, only ships with the stable version of Sass, which doesn't support this yet. I have no idea when Sass 3.2 will go stable. It's been 7 months at least and I was personally anxious to get this going. Thankfully CodeKit recently shipped with a new feature that makes this possible.

As of CodeKit Version 1.2 (6449), you can now tell CodeKit to use an external compiler:

Here's how you get it to work:

Make sure you have at least that version of CodeKit

Open Terminal

Type rvm system. I don't know what this does exactly but CodeKit can't deal with Sass that is installed in rvm directories.

Then install Sass 3.2 with the command sudo gem install sass --pre - you might have to type in your password.

Sass should now be installed at the /usr/bin/ directory

Open CodeKit Preferences and go to Languages and Sass/Scss

Click Choose... under Advanced Compiler Settings

Choose the Sass file in that directory

And done. Note that now you'll be responsible for keeping Sass up to date. But ultimately Sass will go final with 3.2 and CodeKit will update with it and we can go back to using the internal compiler.

Enjoy! It's really quite a pleasure working with media queries this way. Thanks to Christopher Eppstein for helping me with this. Which reminds me, you can do the same exact thing with Compass, just sudo gem install compass and point CodeKit to it as well.

Share On

Comments

Agreed. I still use LESS (and intend to do so until the new SASS release) because it has a better tutorial and website. Then I will switch, but I still hope that SASS will get a better website/tutorial.

I wrote some code that you can run after compiling to CSS that solves this issue. You can find the repo on GitHub. I am still ironing out the process of ensure all breakpoints are applied in the correct order, but it may be of some use to you. I have this setup to run automatically after compilation with Live Reload.

I find with responsive designs especially, grids really tend to limit what you can do, and your freedom. Plus, creating your own basic grid with mixins for different size screens via Sass makes it even easier!

I tend to agree with Terence on this one – Susy looks like a fantastic system if you’re looking for a responsive grid… but I think forgoing the grid altogether can offer you some seriously creative solutions to expanding the content as the width of your page enlarges.

A note about “rvm system”, Mac OS X comes with Ruby pre-installed, version 1.8(.x?). rvm is the ruby version manager you may have installed at whatever point in time to use a newer version, say 1.9.1. For some reason either sass 3.2 or codekit doesn’t play well with rvm installed versions of ruby. typing “rvm system” tells your computer/rvm to use the system’s pre-installed version of Ruby, as opposed to rvm’s newer packages. Note that this may interfere with other things that you have installed 1.9 and other newer versions for, so you may have to switch back at some point. Anyone who does this, you may want to figure out what else you’re using that requires rvm, so you know when to switch to what version.

Any readers of .net magazine might like to know that I covered Sass 3.2 media queries too a few months back (with input from the venerable Mr Eppstein). Due to publication times (print runs etc) it’s just come out in the current print issue. It’s the one promoted on the netmagazine.com site at present. Also, Sass 3.2 can also play happily with LiveReload (beta 3.16 I think?).

One thing is certain: once you’ve done a few responsive sites with 3.2 media querie mixins, you’ll never go back.

It may be similar to the breakpoint approach you mentioned, but it has the advantage of being grid based — so instead of figuring out your widths and using variables, you just determine how many columns you’re expecting for a specific layout, and it does the math for you. For example:

So doing this outputs multiple @media queries for each selector. Have you done and performance tests to see if having multiple media queries for the same breakpoint is better than a single media query for each?

“Which reminds me, you can do the same exact thing with Compass, just sudo gem install compass and point CodeKit to it as well.”

THIS JUST SAVED MY LIFE.
I could never get Compass plugins to work. The entire Compass plugin world just opened up again. WOOOO.
Codekit + Adobe Shadow + Dev Tools + Sublime Text.
The tools are just amazing these days.

Can this be applied to the mobile first approach, I mean that the media queries are placed in a special css file only for capable media queries browser at the same time creating an ie fixed witdth? If anything I said makes anysense.

By the way, if you’re using Foundation 3, you’ll need the 0.13.alpha.x version of Compass if you want to Pointe CodeKit to an external Compass compiler. When Compass officially releases this version, and CodeKit includes this compiler, you can just use CodeKit’s compiler.

Do a sudo gem install compass --pre to get the bleeding edge.

And for me, Sass and Compass were not installed to the /usr/bin directory, but instead to the /Library/Ruby/Gems/1.8/gems/[sass/compass version]/bin directory

I followed the above instructions to get Sass 3.2 working in Codekit (thanks Chris), which seemed to go well … except that I don’t think Codekit is really using Sass 3.2. The placeholder selector feature does not work, ie: %classname can not be @extend(ed).

Codekit seemed to take the new Sass path and shows that it is using /usr/bin/sass which, when tested with sass –version is indeed 3.2.0.alpha.277.

Is there a way to clump all those breackpoints into one really big section in the CSS when compiled? I mean, is there a way that you can set the location in your stylesheet to paste all of those together, like say… a “Responsive” section? Also, is there a way to compile them to fit under a single query if there are multiple classes using the same breackpoint?

Hey Daniel, I too would like to know about this. Just started using the code snippet on this page, but it’s just spitting out multiple media queries one after another, even though they are the same breakpoints.

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.