Similar to the way developers use programming languages to generate valid HTML, Sass and its first cousin, Compass, combine to provide a powerful toolbox for generating valid CSS. It’s a win-win: developers can now use features like variables to write faster and more easily maintained code and the resulting CSS will work in browsers exactly as before. What’s not to love?

Well, this is the Internet and some people don’t love it. Rather than write another overview of the most advertised features of Sass, I thought I’d address a few of its critics and provide some tips for those still unsure about using it.

CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that's just the first paragraph.

Description

At The Future of Web Design I presented Sass and Compass. These were my slides yo.

If you are anything like me, then as a designer you are also probably a bit of a curmudgeon, though perhaps you consider it perfectionism – and justifiably so. You have honed a specific workflow you adhere to because that is what works, dang it. Woe unto anyone who suggests you are not doing things in the best possible way, right? Yes, exactly! Except, well… no.

I believe my first reaction to Wynn Netherland, when he told me I ought to try Sass and that perhaps I would see a boost in productivity, was something along the lines of: “Bah, get off my lawn” — a reference to the cantankerous character played by Clint Eastwood in Gran Torino.

I came to realize that his suggestion was not a subtle way of saying “I know something you don’t know” (though he did), but more of a friendly nudge towards greater efficiency. He was just being a good neighbor, so to speak.

So, I am writing this post in an attempt to get designers out there (who are also already CSS savvy) to try Sass and Compass. I aim for this to be the article I wish I had read when I was first contemplating Sass but (at the time) did not consider it worthwhile. I could not have been more wrong.

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

So you write a lot of CSS, right? I used to be like you. I'll bet you probably write enough CSS to see tons of possibilities in the code, but also maybe you pull your hair out over some of the limitations? It's ok, you can admit it. Like when you have to copy/paste code all over your stylesheets, or when you try to remember the browser prefixes and divergent syntaxes for CSS3 techniques, or how there's no help whatsoever in managing color values. Or maybe you're one of us super nerds who actually has a use for programmatic loops and logic? If you nodded for even one of those, then let me introduce you to Sass.