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 --systemNow for my eclipse project..
sudo gem install compass
cd ~/MyWorkspace/MyEclipseProjectAs 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-sassand 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">
<exec executable="compass" dir=".">
<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
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:
[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:
[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..