Sass and Compass are great tools to help you write scalable, maintainable CSS, however it is admittedly a little tricky to get up and running in a Windows environment. This post aims to help you get going.

Sass can be a little daunting for some designers as it does require a little command line action, but don’t be afraid – when you get Compass compiling your code it will make you look super-cool with your black screen and white text – yeah badass, just like the Matrix.

Let’s get started:

Install Ruby and Compass

1. If you don’t already have Ruby installed (Ruby comes prepackaged with Mac OS but not with Windows), download the installer for Windows
2. After opening the downloaded .exe file and accepting the license you’ll see three checkboxes – be sure to select “Add Ruby executables to your PATH” – doing this will save some pain later (but then again it might not…)
3. Check if ruby is installed, open up a command prompt (click start and type “cmd” in the search box) and type:

   ruby -v

   If you get an error along the lines of “Ruby is not a recognised command” then you may need to edit the PATH variable. To do this:

• Right click on Computer and select Properties > Advanced System Settings > Environment Variables
• Take a look in the path variable, if you don’t see Ruby in there add c:\Ruby192 (or whatever the path to your Ruby install/version). Open up your command prompt and try again.
• If you see the installed version number of Ruby, all went well and you can…
4. Install Compass.  Sass and Compass get installed as Ruby gems (Gems comes with the windows installer), so you can type the following command in your command prompt:

   gem install compass

5. You can check if compass successfully installed by typing:

   compass version

   Compass requires Sass and so should automatically install it when you install Compass.

Setting up a Project

To set up Sass in an existing project:

1. In your command line type 

   compass create path/to/project

2. This will create a stylesheets directory and a config file – config.rb
3. Edit the config file in your text editor of choice to make sure Sass is looking in the correct place for images and to set various output options. Full config options reference

Compiling CSS

When working on your Sass code you’ll want it to be compiling into CSS on save. To get this going:

1. In your command line navigate to your css directory in your trunk repository (where your Sass project is set up), e.g. cd C:\Projects\project\css
2. Then type

   compass watch

Compass will then watch for any saves in the project and compile the new css on the fly and tell you of any problems with your code. When editing production code I find using the HTTP debugging proxy Fiddler to serve your local compiled CSS file (rather than the live server version) really speeds up development and is the ONLY way to roll.