Andrew P Watson

Web Developer

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:

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.

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.


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:


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


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" />


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


Go outside, grill some tips and have a pint!


Problem in STEP ONE: when create a new project, there is a wizard page for {PHP project, Rails Projets, Ruby Project, Web Project, General, PyDev, Ruby, Web(PHP Project, Web Project), Other} In your example, which wizard should we choose ?
andrew's picture

<p>Sorry about being so vague. You can create any sort of project. It will just put a codebase somewhere on your machine. It&#39;s that codebase you need to start the &quot;compass watch&quot;</p> <p>Andrew</p>

Thank you - up and running in 10 minutes. I like Aptana too, stopped using Dreamweaver a year ago and have never missed it! Now to learn Sass over the weekend. Much Thanks!

Hello Andres thanks for this post. I already have an projekt and i'm already using a sass and a css folder. So can i ignore the compass create line?
andrew's picture

That is correct, assuming you already have a config.rb file in the web root. It's that file that tells the compiler where everything is. The compass create command is used to generate the directories, but if you already have them you can skip that.

Nice tutorial! This helped me a lot. I had NO problems to install compass and sass.

You will have to escape the backslashes when you try to do this in Aptana's built-in Terminal: compass create C:\Clientwork\APW\apw.misc --sass-dir=sass --css-dir=css becomes: compass create C:\\Clientwork\\APW\\apw.misc --sass-dir=sass --css-dir=css

I'm running into a problem installing compass and I'm wondering if anyone has seen it. I'm working with Aptana on Windows 8 and installed the Ruby Installer into my user folder. I pulled down a repo from Github that has a config.rb file that is working fine on another machine. I installed compass and it works in the ruby bin folder, but not in any other folder, including the one I pulled my code into. When I run the compass watch command I get a message that says: sh.exe compass command not found. When I run compass version I get the same thing. If I move back into the Ruby folder it works fine. Any ideas?

I just wanted to thanks for the great tutorial! I had one question though.. in step 4 what type of tips and pints to you recommend for best practices?

Just to check that I'm not misunderstanding: Is it correct that your folder name is "apw.misc"? I ask because a dot in the middle of folder names is a little unusual so I wondered if apw.misc is actually a file.

installed Ruby and compass no problems but when i get to the compass create line, i get the response that too many arguments were specified. I'm trying to direct the file to create on my E drive E:\project folder\project should i be trying to further the path to the aptana file (.project)? the ruby file i down loaded is Ruby22-x64 should i go with an older none 64bit version?

So, on the compass watch command, it seems it is just continuously running until you hit Ctrl C. Does it have to be run again every time you open up the project?
andrew's picture

Not unless you have completely shut down your local server. The compass add-on is not technically part of your project, it's part of the local server. I must be honest, it's been a long time since I used this method. I'm 100% Linux for development now, which is also 100% easier.

Add new comment

Enter your favorite racetrack.