As a web developer, I struggle almost daily to subdue my panic over the latest shiny new toy I’m supposed to be heralding. And as I breathe deeply and tell myself to stay calm, I try particularly hard not to obsess over how every other developer manages to learn to use these new toys and still find time to put in a few minutes of real, paying work.
This is my small effort to lend a hand over that bump. Because THIS shiny new toy is really, truly wonderful. It will save you time, money, and sanity, and it will bring more joy to your workday.
I love Sass. I should say “I love CSS preprocessors,” because there are plenty of other fine choices, but preprocessor is an awkward word, and Sass is what I settled on. It really doesn’t matter what you use, as long as you use one. I am an unabashed proselytizer.
This post isn’t meant to give you actual workable details, just to offer a hand over the initial road bump by giving you a conceptual framework and confidence that it isn’t hard. To actually get started, go to the official Sass site, sass-lang.com/guide, which includes all the things you’d expect — a setup guide, a Basics guide, detailed documentation, etc. There’s also a great article at the venerable A List Apart, alistapart.com/article/why-sass, and another at The Sass Way, thesassway.com/beginner/getting-started-with-sass-and-compass. These are, of course, only the tip of the iceberg.
My Super Quick Intro
The term ‘Sass’ refers to both a program and a language. Sass the language is a variation of CSS that allows you to use variables and nesting and other nice things. The problem is that browsers don’t understand Sass – they need CSS. Sass the program takes a Sass file and spits out a normal CSS file that browsers can read.
If you already know CSS, the Sass on-ramp is incredibly gentle. To get started, simply take a normal CSS file, change the extension to .scss, add some Sass syntax somewhere and boom, you’re writing Sass. If all you feel ready to try is, say, using variables instead of hex codes for your colors, just add $red: #FF0000; near the top of your file and use $red instead of #FF0000. Then later, when you realize the crime you have committed against eyeballs everywhere, change that one line — $red: #FF0000; to $red: #FF4136; — and your crime will be erased.
You’re free to use one variable for one color and call it a day. No Sass police will patrol your file for violations – Sass and CSS can, do, and must live together in every .scss file. And, while “Sass syntax” can get plenty complex if you want it to, no one who has ever written CSS will find the concept of nesting hard to comprehend (what is harder to comprehend once you spend 5 minutes nesting things is how anyone ever let plain CSS out into the world).
The slightly trickier part is that you have to run Sass the program to turn that .scss file into CSS so you can see the results of your work in a browser. What you typically want is to “watch” the folder where your Sass files live and have the Sass program run automatically anytime it detects that you’ve saved a .scss file. Once it’s set up, this process is very fast — you can make a change in the Sass and see it almost as soon as you hit refresh in your browser.
The easiest way to set up this workflow is to use a text editor or IDE that includes a Sass compiler (and, ideally, LiveReload too, so your browser refreshes as soon as there’s a newly generated .css file, saving you the onerous tapping of F5 all day long). The command line isn’t that hard, either, but you will have to type the usual gibberish to install the Sass program and then decide on how you want to go about casting incantations to start the process of watching a particular folder. And, although that is, in fact, how I use Sass, I’m not going to get into it here. Just choose a program that incorporates Sass (see sass-lang.com/guide for a list) and get started.