Disclaimer – I’m working on a Windows machine, so any instructions on set up listed below are strictly for Windows. Not OSX or Linux. There are plenty of instruction guides elsewhere for OSX and Linux such as The Sass Way.
Admittedly I’m a bit late to this parade myself, but I had a hard time grasping the benefits at first. I’m a sucker for optimizing my sites for speed and for some reason I was under the assumption that CSS Pre-Processors had to compile the stylesheets on the fly and were served fresh every single time a page loads.
This simply isn’t the case and I’m not sure why I ever assumed that.
Essentially the way the Pre-Processor works is not much different than just writing your average CSS file. Once you have the Ruby gem installed (I’ll walk you through it) you just write your Sass/SCSS and be on your merry way.
This is all done locally on your development computer, not on your server. In some cases you’ll want the gem installed on a server, but most do fine with a local installation.
First things first – What is Sass, and why should I care?
Sass (along with other languages such as Less) is a CSS Pre-Processor.
“Lot of good that definition does me.” I hear you say. “So, what’s a CSS Pre-Processor?”
Basically a CSS Pre-Processor is a way to extend CSS’s native abilities far beyond where they currently are. For example, have you ever used a single color for multiple elements? Of course you have. You probably used the hex or rgb(a) value too and if you’re anything like me, you probably had to look up that color’s value countless times during development as well.
With a CSS Pre-Processor, that’s a thing of the past. You can assign values to variables and use them straight in your CSS. So for example, with Sass you would do the following:
$headerFonts: 'Open Sans', Helvetica, Futura, Arial;
$gray: #ccc;
h1 {
font-family: $headerFonts;
color: $gray;
}
And it would output the following, to your CSS file:
h1 {
font-family: 'Open Sans', Helvetica, Futura, Arial;
color: #ccc;
}
It’ll be indented all nice and everything! Clearly if you just use a color or font-family one time in your CSS, creating a variable for it might not save any time. However if you’re like most developers and have colors and sizes all over the place and need to get them all under control for easy editing, this will be a HUGE time saver.
Guess what? Variables are just the beginning. You can also use things like…wait for it…math. That’s right, you can use math and calculate things right in your stylesheets! If you don’t see any value in that you can just close your browser and go outside. That’s enough Internet’s for you.
However the purpose of this post isn’t to explain all the cool features of it. There are plenty of resources to learn the various things you can do with pre-processors. No, the point here is to walk through getting set up to start using Sass on Windows.
And Secondovly – Getting Windows Ready
Ok cool, so you’re running Windows and you’re all like, I don’t get it. How do I start writing Syntactically Awesome Style Sheets?
Installing Ruby
Well to start out with, you’ll have to install Ruby on your computer. It’s pretty easy, really. Visit Rubyinstaller.org and pick the proper installer for download. Once its downloaded, just run the executable file to finish installing Ruby.
Installing the Sass Gem
Ruby works with little (or big) libraries/packages or ‘gems’ that basically contain files for installation. Sass is one of those gems. In your Command Prompt type the following:
gem install compass
Now hit Enter/Return.
Wait. What’s Compass? I thought we were installing Sass? We are. Compass is actually a Sass framework that is going to speed up development. If you install Compass, you’ll automagically install Sass along the way. If you want to just install Sass without installing Compass, just type in:
gem install sass
And hit Enter/Return.
And that’s pretty much it. It’s a fairly easy install over all and you only have to do all this once, but the fun has just begun.
Your first Sass project
Now comes the fun part, actually using Sass. In your command prompt, cd to your development directory. If you don’t know how to cd to a directory, it’s pretty simple. If your development folder is called ‘test’ on your Desktop, you would type something like the following in your command prompt:
cd C:\Users\Ivan\Desktop\test\
And hit Enter. Then type the following in your command prompt:
compass create hello-sass
You know the drill, hit Enter. What you’ve just done is create a blank Sass project in the ‘test’ directory. You should see a folder named ‘hello-sass’ with a few files and folders inside. Ok, one last Command Prompt script and we’ll be done with that:
compass watch
What this does is watches the .sass/.scss files for any saved changes. If it see’s changes, it’ll automatically compile them for you.
Writing Sass
In the directory that was created (hello-sass) find screen.scss and place the following inside:
$headerFonts: 'Open Sans', Helvetica, Futura, Arial;
$gray: #ccc;
h1 {
font-family: $headerFonts;
color: $gray;
}
Save that file, then find and open screen.css. You should see the following:
h1 {
font-family: 'Open Sans', Helvetica, Futura, Arial;
color: #ccc;
}
Congratulations! You’re on your way to writing better CSS already.
Adding Sass to an Existing Project
So say you’re working on a WordPress theme, and you have the themes folder already created with a bunch of files in it already. How would you add Sass to that project? Well as luck would have it, that’s pretty simple too. Compass has an excellent tool on their website that allows you to enter the parameters of your project, and it will give you the command prompt script to run.
For example, if I want to add Sass to a theme in a folder named ‘the-sassiest’, with a javascript and images directory, I would cd to the wp-content/themes/ folder of my WordPress installation, and run the following command in the command prompt:
compass create the-sassiest --bare --javascripts-dir "js" --images-dir "images"
That creates a new project (complete with a config.rb) with no starting Sass files in the already existing directory ‘the-sassiest.’
Where to from here?
There are plenty of resources out there for writing Sass, and the numerous benefits it carries. The best place to start learning the Syntax is, as usual, the official Sass Reference Guide. Get started on a project and just dig in. Don’t just fiddle around with it. Start using this on a project that matters and you’ll pick it up in no time, and beyond that…never look back.