SASS is one of two CSS preprocessor languages (that I know of, if there are more, let me know) aimed at extending the power and functionality of CSS with the goal of improving development time and reducing repetition in code. As a preprocessor language, SASS requires that we have it installed before we can convert it back into CSS. Without getting into the nitty-gritty of why SASS is awesome, I’m going to walk you through the installation methods for SASS as of the writing of this article. Here’s what I’m going to be installing SASS on:
OSX 10.10.3 Yosemite
That’s about all you need to know for this one. The installation procedure for Windows machines are different and because I no longer run Windows, you may get more mileage following the steps outlined here: Impressive Webs Installing SASS on Windows.
OK, so let’s get started installing SASS on OSX. SASS was built on Ruby, which means you will need Ruby installed before you can even think about installing SASS. Most OSX machines already have Ruby installed, but most Windows machines do not, which is where a large portion of the differences between the two installation processes are. Let’s move onto installing SASS for OSX:
Step One: Locate and open your terminal app. The terminal icon looks like the following…
Step Two: Once you have Terminal open, you’ll want to type the following into the command line:
gem install sass
If everything went off without a hitch, great! Go to Step Three. If you’re like me and got an error, then welcome to the Unlucky Installers Club. We meet once a month and have drinks while complaining about how our lives have to be that much more difficult. Thankfully, this has a fairly simple fix. If your error looks like this:
Then all you really need to do is type this into the command line (don’t close Terminal, don’t restart your machine, just type this below where you got your error):
sudo gem install sass
Chances are pretty good that you have password protected your computer and it needs to ask permission from you every time it needs to install something or open a program that’s never been opened before. When Terminal asks for a Password, enter the same password you use to unlock your computer when you start it up or wake it from sleeping. After you enter your password, hit enter and it will install.
Step Three: You should be seeing this awesomeness which indicates that SASS was fetched and successfully installed:
Depending upon updates to SASS, your version numbers may be different from what you see above, this shouldn’t have any effect on how you install, run or use SASS in the future. Double-checking your installation to make sure it actually worked is always a good idea. Still inside of Terminal, type in the following:
sass -v
This will fetch the version of SASS and should return something like this:
Sass 3.4.14 (Selective Steve)
If you see that, or something similar to it, congratulations, you’ve successfully installed SASS on OSX. Now, before you rush off screaming into the sunset, you might want to check out the SASS Help File to get a better idea of the commands you’ll be using to convert your SASS into CSS. Type this into Terminal:
sass --help
This should give you a comprehensive list of the commands that you can use with SASS to perform various functions. The screen should look like this:
OK, your installation should be all done and good to go. Before we finish up, type this and hit enter in Terminal to disconnect your session:
exit
Now close out Terminal. Wasn’t that easy?
Alternatives to Terminal Installation
So, I understand if just thinking about the Terminal gives you nightmares. So there are some alternatives that allow you to use and convert SASS without having to resort to the Terminal. Here’s a couple of recommendations that I’ve personally used…
Mixture.io
Super simple to use and free! Mixture is a recent discovery for me and I tested it out. Great for preprocessing SASS into plain old CSS. And if you ever need it for Boilerplates, Templating or more then it’s a great option.
CodeKit
CodeKit is a paid app, but it has a lot of neat built-in features and makes converting SASS a snap. CodeKit costs $32USD (as of this writing) and is a one-time cost.
Both of the alternatives above will get you up and running with SASS without having to touch the Terminal. And you won’t have to use the Terminal to convert your SASS to CSS either. It is still recommended that if you’re going to be dealing with any amount of code, that you come to be familiar with Terminal because so many things can (or can only) be done through the command line.