A couple of days ago I’ve decided it’s time to start using a CSS preprocessor. I chose SASS and I tried to install it. And as it seems – I went trough most of the problems that may show up during the installation. I was pretty frustrated for a while but then I realized there is an easy way for everything.
So in this article I will show you two things:
– How to install Ruby, SASS and Compass
– How to troubleshoot some common problems you might encounter during the installation process.
You’ve probably already been to the SASS tutorial page which basically says “Download Ruby and when you’ve installed it run gem install sass”. The way I see it, that is enough for a lot of people and not enough for just as many. Here is a step by step explanation with some visual aids.
Installing Ruby
Step 1 Go to the Ruby Installer for Windows website and download the latest Ruby version – usually the fist file at the top of the list (as I’m writing this article that is Ruby 1.9.3)
Step 2 Open the file, choose your language, accept the license agreement, nothing special.
On the next screen check the second box – Add Ruby executables to your PATH (this is important). Click Next and finalize your installation.
Step 3 Open the Command Prompt or what we call the command line. You can do that easily from the Start menu.
Option 1 In the search filed type Command Prompt or simply cmd. A program with a small black icon will show up at the top of the results.
Option 2 Go to Start menu -> All Programs -> Accessories and click on Command Prompt
A window with black background and white font color opens.
Step 4 Here you can check if everything is okay with your Ruby installation. Type in
ruby –v
You should now see a line saying “ruby x.x.x….” where xxx are your version’s numbers. This means that your Ruby installation is working.
If you get an error message saying ruby is not recognized as an internal or external command, operable or batch file. you’ve probably forgotten to check that box from Step 2. Just uninstall Ruby, run the installation again and this time – make sure you’ve checked the Add Ruby executables to your PATH.
(Reinstalling is the most simple way to fix that problem. However, if for some reason you don’t want to do that, check out how to add ruby executables to your PATH manually.)
Installing SASS
Step 5 It is time to install your preprocessor now. Go back to the Command Promt window and type in
gem install sass
Your cursor will start blinking on a new line for a couple of moments and then a few messages will appear. In not more than 30 seconds you will be good to go.
Step 6 Check if the SASS installation is working. Type in
sass –v
You should see a line stating your SASS version.
Installing Comapss
Step 7 Installing Compass is a lot like installing SASS
In you Command Prompt window type in
gem install compass
and wait a bit again.
Step 7 Check if the Compass installation is working. Type in
compass -v
If you had no problems until now – you are already a proud owner of a working SASS with Compass installation. If you feel exhausted by all of the command line stuff – take a deserved break.
If you get an error massage while trying to install SASS or Compass don’t worry
Sometimes the process doesn’t go so smoothly. You might get an error message like:
Could not find a valid gem ‘sass’ (>= 0) in any repository.
Could not find a valid gem ‘compass (>= 0) in any repository.
Or it could be a different one. My first reaction was to ‘google it’ and try to ‘fix it’. But it turned out it wasn’t worth the time or the nerves. As it seems, the problem usually is that you are behind a proxy without even knowing it. Dealing with that could be pretty frustrating and discouraging, especially if you are not comfortable with all the command line stuff.
Workaround 1 The first thing you should try is switching to another internet connection. Then go back to the point where the problem occurred – Installing SASS Step 5 or Installing Compass Step 7 and try again.
Workaround 2 If you don’t have access to another connection or if you still get the same error messages just forget about this guide. Go straight to this page and start from Step 1 there – How to install SASS and Compass manually. There are some ideas there that could solve all of your problems.
In the next article: Start using your new preprocessor – how to create, translate and start watching your scss/css files with SASS.
Guest blogger: Stanimira
Leave a Reply