Before we can install Sass and Compass, we need Ruby installed. If you are on OS X, you already have it.
If you are on Windows, head over to http://rubyinstaller.org/downloads/, download, and install the latest Ruby installer file (for example, it will be a file link as follows, depending upon the current version: http://rubyforge.org/frs/download.php/76054/rubyinstaller-1.9.3-p194.exe). Just use the defaults (you don't need to put any tick boxes in the options). Linux users should be able to install Ruby direct from their package manager.
I'm assuming if you are running Linux you are savvy enough to understand what to do, if not, I'd suggest getting a Mac!
Now, regardless of the system (Windows/Linux/Mac), we have Ruby ready. We're going to use the Ruby gem command. Basically, we are just saying, "Ruby, install me the 'gem' called 'compass'". Compass actually requires Sass, so by installing Compass, Ruby will automatically install Sass too.
Note
Think of a gem as a tiny application or plugin; it simply extends the functionality of something that uses Ruby. Because Sass and Compass use Ruby, once you get into Sass, you'll often find yourself downloading new gems. For example, there are gems for grid systems like Susy, gems for button styles like Sassy Buttons, and lots, lots more.
Those on OS X should open the Terminal application. It's typically located in the Applications | Utilities folder. Here's the Terminal application in my Finder:
Double-click on that and you'll see a window like the following screenshot:
In case you've never been here before, this is the command line! Now just type this and then press Enter:
sudo gem install compass
You will be prompted for your user password (it's the same one you use to log into your desktop). Just type it in and press Enter. Don't be alarmed when it seems that nothing is happening. When entering a password, the Terminal provides no feedback. With that done, Compass and Sass will install.
How about that, you just installed a Ruby gem. Do you feel like a nerd now? Don't worry, it'll be our little secret.
For Windows
users using Windows 7 or Vista, just click on the Start button and type ruby, and then click on the highlighted Start Command Prompt with Ruby option. Those on Windows 8, from the Start screen, right-click, choose All apps, and then click on the Start Command Prompt with Ruby option.
The Command Prompt will now open as shown in the following screenshot:
Just type the following command and press Enter:
gem install compass
Compass and Sass will now install, and when finished you will be presented with another Command Prompt (a blinking cursor).
There, that's all there is to it. Sass and Compass are installed; you can now start writing Sass and Compass files.
As new features get added to Sass and Compass from time to time, it's worth knowing how to check your current version and install the latest versions. Check the current version of Sass from the command line with the following command:
sass –v
You will see a response, something like Sass 3.2.5 (Media Mark).
To check the current version of compass, run the following command:
compass –v
You will get a
response on the command line such as Compass 0.12.2 (Alnilam).
Of course, it's possible to check the websites of Sass and Compass to find out which versions of each are available, but this can also be done from the command line. Just run the following command:
gem list sass –a –r
We are just asking Ruby to list the versions of all the gems that have sass in their name. The -r part of the command is asking Ruby to check remotely (for example, on the Internet as opposed to on your own system) and the -a part is just asking Ruby to list all the versions. Here's the same command for Compass:
gem list compass –a –r
With either of those commands, you'll get a list of all the gems that contain the word Sass or Compass respectively, with the version numbers listed in brackets. For example:
sass (3.2.0, 3.1.21, 3.1.20, 3.1.19, 3.1.18, 3.1.17, 3.1.16, 3.1.15, 3.1.14, 3.1.13, 3.1.12, 3.1.11, 3.1.10, 3.1.9, 3.1.8, 3.1.7, 3.1.6, 3.1.5, 3.1.4, 3.1.3, 3.1.2, 3.1.1, 3.1.0)
The versions are listed in reverse chronological order (latest first).
To check which prerelease versions are available, the command is:
gem list sass --pre -r
To check which prerelease versions of Compass are available, the command is as follows:
gem list compass --pre -r
To install the latest
stable version of Sass, just run the following command (the sudo part may not be needed depending upon your system configuration):
sudo gem install sass
If a future version has something exciting you want to try out but it isn't yet a full stable release, you can install the latest prerelease version by running this command:
sudo gem install sass --pre
However, be aware that there may be bugs and inconsistencies with the latest version. So, unless you have a specific reason to do so, I'd recommend only using the stable versions.
It's the same style of command for Compass:
sudo gem install compass
And for the prerelease version:
sudo gem install compass –pre
Tip
How to uninstall a specific version of Sass
Now, should things go pear-shaped at any point, you can roll back to a previous version of Sass by using the following command:
gem uninstall sass --version versionnumber
Here, versionnumber is the release you want to remove (for example, 3.2.0.alpha.103).
Want to create a
Sass and Compass project from the command line? This can be done by changing folders in the command line to where the site folder should be (for example, I tend to keep mine in a folder called Sites) and running this command:
compass create my-project
Hopefully that command is self-explanatory; we're just using Compass's built-in create command to make a project in the folder specified. For example, the my-project part is the name of the project folder that will be created. Compass then creates a number of files and folders. Following is an example of the resultant files in Windows:
Tip
What are the generated files in a Compass project for?
We'll cover what the various files and folders do in depth in Chapter 2, Setting up a Project based on Sass and Compass. In the meantime, here's a quick overview of what each does:
.sass-cache: This folder will contain the cache files that Sass uses to build your CSS files faster. You don't need to do anything with it.
sass: This folder will store the Sass files that will be written or amended. This folder can be called anything, but 'sass' is the default name.
stylesheets: This folder will contain the compiled CSS files that Sass will generate. It can be called anything, but stylesheets is the default folder name in Compass projects.
config.rb: This file contains the configuration defaults for a project, what the various folders are called, and where they are located. It also controls the compression style of the generated CSS.
To have Compass 'watch' the
Sass files for changes (which are in the sass folder of the project) and automatically compile them into CSS on save, it's necessary to first browse to the folder that holds the Sass files being worked on (it may help to refer back to the Getting around on the command line tip box in the Install Sass and Compass section for the relevant commands). When at the root of the relevant folder (when listing the contents of the folder you are in, the config.rb file should be listed) run this command from the command line:
compass watch
This Compass command just says "Compass, watch this project, and if any Sass files change, recompile the CSS". Now, whenever the Sass files within are changed, Compass will automatically note any changes and recompile the equivalent CSS files (the CSS is compiled into the stylesheets folder of a Compass project by default).