Sass, Compass & my Eclipse projects

I wanted to integrate Sass/Compass CSS generation into my Eclipse projects with automated compiling of my .scss files.

I'm not really a front end guy and loathe managing CSS, particularly in CSS notation. I looked at Compass a few years ago, liked it, then forgot about it. I obviously hit some tipping point recently and went back to revisit it. The idea of features like mixins and variables appeal to me as a Java dev.

So here's how I do integration into my Java WebObjects projects in Eclipse 3.7.2 on Mac OS X 10.8.1.

First up - installing compass:

sudo gem update --system
sudo gem install compass

Now for my eclipse project..

cd ~/MyWorkspace/MyEclipseProject

As a part of my stock WebObjects (Project WOnder) project directory structure I'll make use of the Resources and WebServerResources directories.

My Compass project will live here:
Resources/compass

My Sass source files will live here:
Resources/sass

And my compiled CSS files will be created/updated here:
WebServerResources/css-sass

So I create a Compass project inside my Eclipse project:

cd Resources/compasscompass init --sass-dir ../sass --css-dir ../../WebServerResources/css-sass

and back to my project root

cd ../..

This creates the following project, source and css files:

Resources/compass/.sass-cache
Resources/compass/config.rb

Resources/sass/ie.scss
Resources/sass/print.scss
Resources/sass/screen.scss

WebServerResources/css-sass/ie.css
WebServerResources/css-sass/print.css
WebServerResources/css-sass/screen.css

For automatic build integration I create a dedicated build xml file in my Eclipse project root build-compass.xml containing the following:


<project name="MyEclipseProject" default="compass.compile" basedir="Resources/compass">
<target name="compass.compile">
<exec executable="compass" dir=".">
<arg value="compile"/>
</exec>
<eclipse.refreshLocal resource="../../WebServerResources/css-sass" depth="infinite"/>
</target>
</project>


Now to set up an Ant Builder in the project's properties dialog.
Properties -> Builders -> New (and choose Ant Builder)

In the Main tab I give it a name, in this case compass.compile, and set the Build File value to the file we just created:

In the Targets tab I set Auto Build to and in the Build Options tab I "Specify Resources" referencing my Sass source file directory.

I can now edit my Sass source files in Eclipse, on save they compile to CSS in my WebServerResources directory which has been refreshed to reflect any changes.

My console output show me the following on successful compilation:


Buildfile: /Users/me/MyWorkspace/MyEclipseProject/build-compass.xml

compass.compile:
        [exec] [31m [0m [32midentical [0m ../../WebServerResources/css-sass/ie.css 
        [exec] [31m [0m [32midentical [0m ../../WebServerResources/css-s [31m [0m [31m [0m [31m [0mass/print.css 
        [exec] [31m [0m [32midentical [0m ../../WebServerResources/css-sass/screen.css 
BUILD SUCCESSFUL
Total time: 1 second

or something like this on build failure:



Buildfile: /Users/me/MyWorkspace/MyEclipseProject/build-compass.xml

compass.compile:
        [exec] [31m [0m [31m [0m [31m [0m [31m [0m [32midentical [0m ../../WebServerResources/css-sass/ie.css 
        [exec] [31m [0m [32midentical [0m ../../WebServerResources/css-sass/print.css 
        [exec] [31m [0m [31m    error [0m screen.scss (Line 15: Undefined variable: "$defaudltSpacing".)
        [exec] [33moverwrite [0m ../../WebServerResources/css-sass/screen.css 
        [exec] Result: 1
BUILD SUCCESSFUL
Total time: 1 second




As always YMMV..