How to set up Compass & Sass on Windows with Aptana Studio 3

Fri, 07/27/2012 - 11:09

I know there are a bunch of these posts explaining how to configure Compass and Sass on Windows, but I wanted to post a cut-and-dry explanation for the rest of us specifically using Aptana Studio 3. I hope this helps someone out there looking to dive into Sass development.

[Update: Since writing this, I've finally abandoned Aptana in a Windows environment for web development. Do yourself a huge favor, download the free VMWare player and install it. Once installed, download Ubuntu Desktop and create a virtual machine locally. Doing any sort of web development in Ubuntu is so lightyears better than Aptana & Windows. You can have local Apache, PHP, MySql, Sass, and everything else you need to build/run modern websites. Windows is NOT optimal for development... Just saying]

What is Sass?

I'm not even going to answer that, because you wouldn't be here if you didn't know.

What do I need?

Aptana Studio, which is the best code editor available (in my opinion). It can be downloaded here:

http://www.aptana.com/products/studio3/download

The Windows Ruby installer. This is a one-click installer for the rest of us not "hip" enough to own a Mac or run Lynux.

http://rubyinstaller.org/downloads/

Be sure and not where you installed Ruby. The default is at the root of your C drive, and I'll use that for my example below.

What do I do?

Once the two items above are installed, you are ready to go.

STEP ONE:

Open Aptana and create a new project. Be sure to note where the project is on your drive, you'll need that path for step two. For this explanation, I made one here:

C:\Clientwork\APW\apw.misc

This is the webroot of my project, where the css, images, and js folders are.

STEP TWO:

Open a Windows Command Prompt and move to where you installed Ruby, landing in the "bin" directory:

cd "C:\Ruby193\bin"

Now you'll need to install the Compass component. This is what will compile your Sass files into CSS for you. It runs on Ruby, which is why you had to install it. Enter this at the command line to install:

gem install compass

At this point, you have Ruby and Compass installed and can set up your Sass project.  Enter this line to configure one in the webroot of your Aptana project (change project path to yours):

compass create C:\Clientwork\APW\apw.misc --sass-dir=sass --css-dir=css

Ok, now you are ready to go! This command did a few things.

• Created a folder for your Sass files (/sass) and put some default files in there to get you started.
• Created a folder for your CSS files (/css) and did an initial compile of the Sass files for you (created CSS files from them).
• Created a Sass configuration file in your webroot (/config.rb) that has some settings in it to get you started.

You will want to update your HTML to include the stylesheets in your CSS folder.

<link href="/css/screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
 <link href="/css/ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

STEP THREE:

Compass can "watch" your Sass directory for changes made, and compile new CSS files automatically for you. This is extremely helpful. To turn this feature on, enter this at your command prompt (obviously changing the path to where your project is):

compass watch C:\Clientwork\APW\apw.misc

STEP FOUR:

Go outside, grill some tips and have a pint!