Integrating compass into an Eclipse workflow

After putting off any changes to my workflow due to the amount of work lately, I recently took the plunge into using the Sass preprocessor / Compass to help make managing stylesheets bearable again. Compass especially serves to give developers access to some lovely sugar, with commonly implemented solutions ready to integrate into your stylesheets – and will seriously reduce the amount of work dealing with different browser differences.

There are already many articles about  CSS extenders / preprocessors, and without going into the debate of Less vs Sass, the main downside is having to set up the development environment to process the enhanced stylesheets before we can view the results.

Installing Compass

Arguments against Sass (and implicitly, Compass) requiring Ruby to work are easy to workaround – there are guidelines for all platforms at http://www.ruby-lang.org/en/downloads/ – for Ubuntu 10.04, I ran:

sudo apt-get install rubygems

This installs all the necessary prerequisites. The Compass installation page gives all the necessary steps to get started.

You may need to add a path to the gems for the commands to work – assuming the scripts are located at /var/lib/gems/1.8/bin/  (say in the case of ruby 1.8) add this to the end of your ~/.bashrc file:

export PATH=/var/lib/gems/1.8/bin/:$PATH

With Windows, this is even easier. The rubyinstaller also sets up the paths for you! The remaining steps of installing sass / compass via gem applies.

Setting up a compass with an existing project

If you already have existing stylesheets, you will want to turn off preset scss files generated by compass with the bare option. You can also direct compass to follow your project’s folder structure.

Run this within your project root (for example /var/www/htdocs)  – note that this is just an example – and reflects my own setup:

compass install bare --sass-dir "app/pub/sass" 
   --css-dir "app/pub/css" --javascripts-dir "app/pub/js"
   --images-dir "app/pub/images"

(this should all be one line)

Directories will be created if they do not already exist. A config.rb will be created in your project root that tells compass which folders to scan. See http://compass-style.org/install/ for further guidelines and a nice wizard to guide you in setting up compass.

Usage overview

The main out-of-the-box route to processing SCSS/SASS files and/or Compass projects  is to run the command line app when you are ready to test new changes – in the case of compass:

compass compile yourapp/trunk/

This can be rather tedious though especially with the rapid approach to web development, and where simply refreshing the browser can suffice to see changes. To automate this process, compass and sass can watch for changes and compile automatically as required – just run this at the start of your session:

compass watch yourapp/trunk/

Again, you have to remember to start this process every session. There is a [paid-for] desktop GUI application to deal with this too, but personally, I’d rather not have to think about this!

Builders in Eclipse

I started looking into methods to automate this within Eclipse. We can break this down: the objective is to run compass after saving the SASS files.

One answer that has popped up several times on stackoverload is to write an extension to run an action on the save event – however without proper tooling in Eclipse, this would presumably be another project to consume your time in!

There is a solution however in the form of project builders.

Within Eclipse project properties (Project menu item > properties), you can find the  ‘Builders’ section, (this is also where you can enable or disable JavaScript parsing). The ‘New’ button allows developers to add external programs that run as part of the project build process.

In our case here, every time we save a file, we can trigger an automated rebuild of this file, and we need Project > Build Automatically to be enabled for this to happen.

Firstly though, we need to create the new builder. Just for information’s sake, I am running Eclipse Indigo SR2 with PDT v3 on Windows 7, but these apply equally for Macs and Linux platforms). These were the steps I performed:

  1. If not already, open the project property window (Project > Properties), and navigate to the Builders section.
  2. Click [New…]

    New builder dialog and the Project Properties window
  3. A dialog titled ‘Choose configuration type‘ will appear. Select ‘Program‘, and [OK].
  4. The ‘Edit Configuration’ window will appear for the builder settings. Name the new builder something relevant – in this case I used ‘Compass’;
  5.  The tabbed sections with notes:
    • Main page configures the external program –
      • Location: path to compass script. This must either be within the environment path (as set in the Environment page), or be the full path to the gem script. I’ve set this to [C:\Ruby193\bin\compass.bat] in my case. The dialog here will report if the program cannot be located.
      • Working directory: the project path as specified for compass (or where you want sass to operate). Mine is [Y:\ddc\htdocs]. Even though I use RSE to remotely access these files within Eclipse, external apps like Compass requires an actual filesystem path.
      • Arguments: compile

        Main settings for the Compass builder
    • Refresh specifies what you want to do after the program has finished compiling. I would like Eclipse to recognise the updated css files!
      • Refresh resources upon completion‘ is [checked]
      • Specific resources‘ is set to the output folder where the css files are saved to – in my case [app/pub/css] is ticked.
    • Environment allows you to set specific variables applicable to the command line or your application
      • Path – here, compass.bat would not run as Eclipse could not find ruby.exe, so the ruby/bin path had to be setup (in fact, I copied this from the Windows environment settings). Note it’s likely that this would not apply to Linux or Mac environments.
    • Build Options – what triggers this builder? plus miscellaneous.
      • Allocate console‘ [checked] so we can see the results in the console panel
      • Run the builder: [After a clean], [During manual builds], and [During auto builds].
      • Specify working set of relevant resources‘ [checked] – set this to the sass source folders – in my case, [app/pub/sass]. Any changes found in this folder will trigger this builder.
  6. When all done, [OK] the configuration. The new builder should appear as the last item of the list.
  7. Make sure that Project > Build Automatically has been ticked in the menu to enable automatic compiling.

 

Refresh settings
Environment variables
Build Options

 

The easiest way to test the new builder is to open the console panel, and create/edit a SCSS (or SASS if you prefer) file, and save within the sass folder. If everything is working, ‘building workspace’ should appear in the status bar, and the console should display the program path, and the results.

Auto-build console output

The icing on the cake – you only have to perform this once for each project instance!

Conclusion

An automated build process using external tools – applicable with other preprocessors – i.e. javascript minifiers. A streamlined workflow. One less thing to think about.

  • shrinkray

    This works very well, thanks for the post! 

  • Patricia Fernandez

    Muy bueno!!!

  • Patricia Fernandez

    Can I show only overwrite files?? I don’t want to watch the list of unchanged files. 🙂

  • Fai

    @google-6e44f7874c5be41dc8b954b3fc602b85:disqus  from what I understand, Eclipse will only take action once you commit an action (save) on a file if it is in a watched folder, and you’d trigger Compass on the configuration you defined (this would be your watch folder). Compass should only update the files you’ve modified – anything unchanged will be left alone. I presume it works by comparing file timestamps.
    Is this the answer you were looking for?

  • Patricia Fernandez

    I think so. I think that I don’t configure for watching only overwrite files because “compile”  when i save on the file and.. “compact wacth” don’t execute when open the proyect the first time. 🙁

    Pardon by english. I speak spanish! 🙂

  • Pingback: SASS setup for Windows & Eclipse | Desarae A. Veit : Sassy Stylish Geek()

  • Dietrich Schulten

    Very helpful, thank you very much. You can also use ${system_path:compass.bat} on Windows if you have ruby on your PATH. 
    Furthermore, It took me a while to find out that the working directory should be the one containing config.rb. I am now using the maven convention for src folders ${project_loc}/src/main/compass.
    Unfortunately, for the build options you still have to select the folder containing the scss files manually.
    You seem to have a nice scss editor – what are you using for eclipse?

  • Fai

    Yes it’s a bit of a pain admittedly, but it’s useful for the one-off projects. The SCSS editor is just the built-in CSS highlighter – it does the job, minus the syntax warnings.

    I’ve actually started using Sublime Text for editing SCSS files now – I’ve managed to automate the process on save, regardless of how many config.rb riles are within the project. At some point I’ll put the mod up on github.

  • Koko Dinev

    Please explain a bit more what should I type into the “Path” variable cause on the screenshot is not very clear