You Had Me at Version 3.2

CSS maestro Dan Cederholm returns to the A Book Apart series with the release of Sass for Web Designers. If you’re an old CSS hand and haven’t dipped your toes in the Sass waters, I highly recommend this brief, digestible intro to the topic.

Sass is to CSS as jQuery is to JavaScript. Both tools extend established patterns without enforcing an onerous framework. As Dan puts it, they “superset” the languages they extend, making them vastly easier to grasp and work with. Valid JavaScript is valid jQuery, valid CSS is valid Sass. That lets you opt in gently.

As someone who used to break out in disfiguring hives at the mere mention of the word “preprocessor,” I consider myself a late arrival to the Sass party. The idea that my CSS might be dependent on a secondary tool just plain freaked me out. But the more I looked at it, the more I realized it didn’t mean contorting my workflow at all. In fact, it un-contorted it (a highly technical term I have invented just now) in some very important ways.

One of those came with the release of Sass 3.2 and some incredibly useful features for media queries. The short version: Sass mixins let you write multiple media queries inside a single CSS selector, rather than the other way around.

When I write it like that, it sounds pretty tame. But it alleviates one of the biggest pains of writing CSS for responsive projects: navigating multiple versions of the same selector across different groups of media queries. So instead of looking for that “p.awesome-class-yo” selector again and again—first in my default mobile-first styles, then in the styles for every successive breakpoint—I just need to find it once. Boom. No more shuffling back and forth.

Dan dedicates a chapter to explaining the basics of this far better than I could here, along with all the other useful Sass goodies. (Variables! Single-line comments! Imports! Future-proofing and banishing vendor prefixes!) Go get it.