Main menu

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:

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 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):

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

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.

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?

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?

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.