menu

Sassy CSS

Sass Logo

Earlier this week, I attended a presentation at Harvard about an extension of the CSS3 language called Sassy CSS (SPCSS), or just "Sass." Here's the run-down:

What Sass allows you to do with CSS: For starters, Sass allows you to create and use variables like a scripting language. That means, for example, that instead of remembering to type "#3bbfce" every time you need to use the color you've branded your site with, you can just declare a variable: "$blue: #3bbfce" and only have to remember that variable. Of course, this also means that if you decide to re-brand, you only need to change the color code in one place.

More involved features include the ability to make Sass execute some math for you (useful for calculated height, width, margins, and padding), adjust a base color (making it lighter or darker), nesting and selector inheritance so that you don't have to write long strings of CSS properties, and even the ability to write and re-use functions (termed "mixins" in SPCSS).

How you use it: You install Sass on the local machine where you are doing your coding and save the CSS file you're working on with the extension .spcss. You can now write SASS code along with your regular CSS code. When you're ready to deploy the code (or just test it), you run an execute command in the command line (using Terminal on the Mac, for example). The command tells Sass to compile the SPCSS document you've written, transforming the SPCSS file into a standard CSS file.

So, think of Sass not so much as a new language you have to learn, but as a kind of working short-hand that can help you code more efficiently, a shorthand that gets translated back into regular CSS before any browser actually tries to interpret it. For more about Sass and to give it a try yourself, just check out the Sassy CSS site. Slides from the presentation are available here.