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

Sass Compass Aptana

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!

Comments

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

Sorry about being so vague. You can create any sort of project. It will just put a codebase somewhere on your machine. It's that codebase you need to start the "compass watch"

Andrew

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?

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
To prevent automated spam submissions leave this field empty.
Google