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.
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.