Thursday, 6 September 2012

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:

My Sass source files will live here:

And my compiled CSS files will be created/updated here:

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:




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"/>
<eclipse.refreshLocal resource="../../WebServerResources/css-sass" depth="infinite"/>

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

        [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 
Total time: 1 second

or something like this on build failure:

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

        [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
Total time: 1 second

As always YMMV..

No comments: