Automatically Compling SASS / Compass in Eclipse / Zend Studio

Posted on by

Recently I was tasked with figuring out how to use SASS and Compass in a project I was working on. SASS adds all kinds of new capabilities to your CSS files such as variables, nested rules, selector inheritance, and more. Compass builds upon SASS by adding some very useful libraries. To learn more about them go to:

http://sass-lang.com/

http://compass-style.org/

In the project I’m working on we happen to use the Zend Studio which is built on the Eclipse IDE. Normally when working with SASS / Compass you need to open a terminal window and enter a command to “watch” your .scss files. That way when a file changed it would automatically compile it into a .css file. Being lazy by nature I didn’t like the idea of having to open a separate terminal window in addition to launching the IDE to do compile the files so I figured I should be able use Ant to handle this task. It took a bit of research and some fiddling but I finally figured it out. Now every time I change one of my .scss files it is automatically compiled into a .css file. I’m a happy camper!

The following are the steps to make that magic happen. I’ve included two targets in the build.xml file: one for SASS and one for Compass. If you just want to use SASS and not compass choose the sass.compile target. For Compass use the second compass.compile target.

1. Install Ruby. Mac OS X already has Ruby installed. On a Windows system go to:

http://rubyinstaller.org/

…download and run the RubyInstaller application.

2. Install the Compass gem. From the command line type:

 gem install compass

This will install Sass, Compass, and a few other supporting Ruby gems.

3. Make sure that the Ant is installed. In Zend Studio go to Help > Welcome  and check Ant and click the “Apply changes” button. In Eclipse Ant is usually installed automatically. If not go to Help > Install New Software and you should be able to find it there.

4. Add the targets to your build file. If you already have a build.xml file in your project you can just add the sass.complie and compass.compile targets to your existing file. If you don’t have a build.xml file create a new one and copy all of the following in it:

<?xml version="1.0" encoding="UTF-8"?>
<project basedir="." default="">

<!-- Compile .scss and .sass files in the public/sass directory using SASS -->
<target name="sass.compile">
  <property name="sass.dir" value="public/sass" />
  <property name="css.dir" value="public/css" />

  <apply executable="sass" dest="${css.dir}" verbose="true" force="true" failonerror="true">
    <arg value="--unix-newline" />
    <arg value="--compass" />
    <srcfile />
    <targetfile />
    <fileset dir="${sass.dir}" includes="**/*.scss,**/*.sass" excludes="**/_*" />
    <firstmatchmapper>
      <globmapper from="*.sass" to="*.css" />
      <globmapper from="*.scss" to="*.css" />
    </firstmatchmapper>
  </apply>
  <eclipse.refreshLocal resource="xa/public" depth="infinite"/>
</target>

<!-- Compile .scss files in the public/sass directory using Compass -->
  <target name="compass.compile">
    <exec executable="compass" dir="${basedir}/public/sass">
      <arg value="compile" />
    </exec>
    <eclipse.refreshLocal resource="xa/public" depth="infinite"/>
  </target>
</project>

5. Open the project properties (right-click on the project and select “Properties”)

6. Select Builders and click the “New…” button

7. Select “Ant Builder” and click the OK button

8. In the Edit Configuration window enter a name in the field at the top (compass.compile) and make sure the “Main” tab is selected

9. Click “Browse Workspace” button and select the build.xml file from the project

10. Select the “Targets” tab and click the “Set Targets” button next to Auto-Build

11. Select the “sass.compile” target if you just want to use SASS or select the “compass.compile” target to use Compass.  Click OK.

12. Select the “Build Options” tab

13. Click the “Select Resources” button. Select the public/sass directory and click OK

That’s it! Now when you makes changes in any of the .scss files in the Sass directory the will automatically be compiled and .css files will be created/updated in the .css directory.

23 thoughts on “Automatically Compling SASS / Compass in Eclipse / Zend Studio”

    • I can’t think of what the problem could be off the top of my head. Are you seeing any errors in the Eclipse console? If Eclipse is setup correctly you should see some messages show up there which might provide a hint as to what might be going wrong.

      Reply ↓

      • I was wrong… The console shows an error everytime but my setup seems to work.. Although I also setup using command line so I don’t know which is doing the job.

        Reply ↓

          • Sorry for the delay in my reply. It sounds like it’s looking for the compass program in the stylesheet directory. I’m not sure what kind of system you’re on or how you installed Compass but make sure that it’s in the application path. You should be able to type ‘compass’ on the command line and see the help for the program.

  4. Pingback: SASS oder Compass-Dateien in eclipse automatisch beim Speichern kompilieren | Kau-Boys

  5. First off thank you very much for taking the time to write this guide. If I can get this working its going to be amazing.

    I am testing on Windows 7 64bit, Zend Studio 9.0.4 using WAMP.

    1. I get error:
    BUILD FAILED
    C:\wamp\www\project\build.xml:25: The directory C:\wamp\www\project\public\sass does not exist

    So I updated this to reference my file structure:

    <property name="sass.dir" value="webapp/templates/base/sass" />
<property name="css.dir" value="webapp/templates/base/css" />

    AND

    <exec executable="compass" dir="${basedir}/webapp/templates/base/sass">

    2. This then gives me the error:
    BUILD FAILED
    C:\wamp\www\project\build.xml:25: Execute failed: java.io.IOException: Cannot run program “compass” (in directory “C:\wamp\www\project\webapp\templates\base\sass”): CreateProcess error=2, The system cannot find the file specified

    I confirm that when I type “compass” into the cmd I see the help text.

    Any ideas what could be causing this?

    Reply ↓

    • I would check to make sure that you can run the compass command from the command line. It may be that the compass command is not in the path being checked.

      Reply ↓

  7. This is all so much easier than it looks.
    1 – Create compass project
    2 – Make sure that config.rb file contains correct paths to sass, css and other directories.
    3 – Create ant build file with following content.

    Runs perfect from command line or eclipse.

    Reply ↓

    • Thanks, Artem, for your input. Yes, you can run Sass/Compass easily from the command line. I didn’t want to have to remember to start up Compass watch from the command line when I was working in Eclipse. With this setup I just go into Eclipse as I normally would for my work with no extra steps.

      Reply ↓

  8. Thank you for this, just upgraded to Zend Studio 10 and was looking to incorporate scss into my builds.

    I followed the walkthrough, but I’m getting the following console error:

    Buildfile: C:\Users\Zxurian\Documents\HTTP Docs\capturect.com\build.xml

    sass.compile:

    BUILD FAILED
    C:\Users\Zxurian\Documents\HTTP Docs\www\build.xml:7: Execute failed: java.io.IOException: Cannot run program “sass” (in directory “C:\Users\Zxurian\Documents\HTTP Docs\www”): CreateProcess error=2, The system cannot find the file specified

    Total time: 317 milliseconds

    (I do have ruby & sass installed, and am able to run sass from the command line, however doing that just yields a blank prompt unless I Ctrl-C)

    Reply ↓

    • Without being on your system it’s hard to tell exactly what’s going on. Are you able to run the sass command from within the C:\Users\Zxurian\Documents\HTTP Docs\www directory? From the error message it looks like it is finding the command but maybe doesn’t have permission to run it in that directory.

      Reply ↓

      • I actually solved it by changing the run command to “sass.bat” instead of just “sass” and it works fine now. I’m not sure if it’s a windows only issue, but that’s how I solved it.

        Reply ↓

Leave a Reply