Automatically Compling SASS / Compass in Eclipse / Zend Studio

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.

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

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

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

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

  2. 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?

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

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

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

  4. 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)

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

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

          • I faced the same problem on Windows 7. I was able to run the sass command on the command line, but the ant build failed.
            The reason was, that sass respectively the Ruby bin directory was only in the path of the user, but not in the path of the system.
            After adding Ruby to the system path, the ant target was working flawlessly.

        • changing the executable to “sass.bat” didn’t work for me, but changing it to “C:\Ruby193\bin\sass.bat” did.

          I’ve found the solution on stackoverflow:
          “http://stackoverflow.com/questions/20527826/in-eclipse-executing-sass-with-ant-task-why-have-i-to-set-executable-to-sass

          • Addition to micmor: As explained in the stackoverflow article
            add this to your build.xml:

            In the targets change the executable params to ${sass_exec} and ${compass_exec} and delete
            the dir param like this:

            and it should work.

          • Sorry, xml was filtered out. Another trial…

            Add this to build.xml:

            <!-- Set this to the Ruby windows exec path ($PATH won't work) -->
            	<property name="win_path" value="C:\Ruby193\bin" />
            	<condition property="sass_exec" value="${win_path}\sass.bat" else="sass">
            		<os family="windows" />
            	</condition>
            	<condition property="compass_exec" value="${win_path}\compass.bat" else="compass">
            		<os family="windows" />
            	</condition>
            

            and then change the according lines in the targets like

            <apply executable="${sass_exec}" verbose="true" force="true" failonerror="true">
            <exec executable="${compass_exec}">
            
  5. Everything described here sounds really promising that I can get Eclipse to do the job for me.
    Unfortunately my project is component-based so each component has its own /sass/ and /css/ folders. So they are distributed across hundreds of component folders.
    Can I avoid manually adding the folders to the XML? Is there a way to tell Eclipse to process all .SCSS files within any /sass/ folder no matter where and how deep in the project it finds them?
    Thanks in advance

    • That’s an interesting situation. I’ve been reading more about component-based projects lately and I like the idea. I can see how this could be a real problem. It doesn’t seem like SASS or Compass will search directories recursively. I did a little searching and did find http://stackoverflow.com/questions/9280071/compass-source-in-multiple-directories in Stack Overflow. The basic idea is to create one master config file that imports the SASS files from the component directories. It will take a bit of time to setup if you have hundreds of components and might be a pain to maintain if you’re constantly adding components. That’s the best solution that I’ve found so far. I’ll have to keep looking though. I’m sure others must have run into this problem as well.

  6. I am running on OS X 10.9.2 and have Compass installed globally and can run the command from my specific folder in Terminal but in Eclipse I am still getting getting the following error upon `sass.compile`:

    `BUILD FAILED
    /Users/jdsimcoe/Sites/twin/dec-mozo/site_mozo/sassbuilder.xml:19: Execute failed: java.io.IOException: Cannot run program “sass” (in directory “/Users/jdsimcoe/Sites/twin/dec-mozo/site_mozo”): error=2, No such file or directory`

    Any thoughts on how to resolve this?

  7. Pingback: 如何让Eclipse/Zend自动编译SASS到css | junjun的博客

  8. Pingback: Windows 環境用 eclipse 跑 sass build | John's code place

Leave a Reply