Media Queries, Sass 3.2, and CodeKit

Media queries are already awesome. Media queries in Sass are already awesome. Media queries in Sass 3.2 are going to be really awesome. This is how you can get CodeKit to start using it.

This isn’t a brand new idea. Ben Schwarz did an excellent 7 minute video showing us how it works 7 month ago. Jeff Croft wrote about it 4 months ago. Mason Wendell wrote about it 3 months ago.

The magic is thus

You can already do this in the stable version of Sass (3.1.2):

.column-1-3 {
  width: 33.3333%;
  @media (max-width: 600px) {
    width: 100%;
  }
}

Sass will move it out to valid CSS like this:

.column-1-3 {
  width: 33.3333%;
}
@media (max-width: 600px) {
  .column-1-3 {
    width: 100%;
  }
}

But you might want to do that tons and tons of times in your CSS, because of how awesomely convenient 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:

1. Like calling media queries “breakpoints”
2. Don’t like the idea of naming them after anything specific, like “iPad”
3. Like fairy tale analogies

So, I write my mixin like this:

@mixin breakpoint($point) {
  @if $point == papa-bear {
    @media (max-width: 1600px) { @content; }
  }
  @else if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
  @else if $point == baby-bear {
    @media (max-width: 650px)  { @content; }
  }
}

Now I can write code like:

.page-wrap {
  width: 75%;
  @include breakpoint(papa-bear) { width: 60%; }
  @include breakpoint(mama-bear) { width: 80%; }
  @include breakpoint(baby-bear) { width: 95%; }
}

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:

1. Make sure you have at least that version of CodeKit
2. Open Terminal
3. Type rvm system. I don’t know what this does exactly but CodeKit can’t deal with Sass that is installed in rvm directories.
4. Then install Sass 3.2 with the command sudo gem install sass --pre – you might have to type in your password.
5. Sass should now be installed at the /usr/bin/ directory
6. Open CodeKit Preferences and go to Languages and Sass/Scss
7. Click Choose… under Advanced Compiler Settings
8. 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.