About six months ago, when I was still in Australia, my team decided that we needed to do a UX revamp for the application we were building. As part of that initiative, I suggested to start using Compass and SASS, which would simplify our CSS and make it more readable, alowing us to refactor everything that we would need and extract common stuff.

At that time, we tryied to find some Java library that could help us, with no success. We wanted to have a single jar with JRuby and all the gems that were needed and integrate everything with Ant. Today, for what I have searched, there is still no good solutions out there, so I have decided to share what we did.

Let me guide you through the required steps:

1 - Downloading JRuby

Just download the latest JRuby version and put into a place where you can modify it.

2 - Bundle pure-Ruby gem applications into an uber-jar

Here we followed this great tutorial, which explains each of the steps for creating our own jar. I have extracted the necessaries commands below and if you want more explanation about what is going on I suggest reading the post that I have mentioned.

java -jar jruby-complete-1.6.0.jar -S gem install -i ./compass compass
jar uf jruby-complete-1.6.0.jar -C compass .
java -jar jruby-complete-1.6.0.jar -S gem list

You can move the modified jar into the /lib folder.

3 - Creating Compass config files

a) create the /config/compass/compile.rb file

This file will have the ruby code that will be invoked by Ant and it's responsible for requiring all the dependencies and invoking compass. We also need to specify what is the command that we want compass to execute (we will have two possible commands: compile, which will convert *.sass files into *.css files and watch, which will watch a folder for modified content, and as soon as a .sass file is modified, the .css version of this file will be automatically created).

Dir.entries(ARGV[0]).each do |lib|
    $LOAD_PATH.unshift "#{ARGV[0]}/#{lib}/lib"
end
 
require 'rubygems' 
require 'compass'
require 'compass/exec'
 
command_line_class = Compass::Exec::Helpers.select_appropriate_command_line_ui [ARGV[1], ARGV[2], "-q"]
exit command_line_class.new([ARGV[1], ARGV[2], "-q"]).run!
 

b) create the /config/compass/config.rb

This file will have the properties required by Compass. Basically we need to specify where is the input folder, with all the *.sass files, and where is the output folder, with all the *.css files converted.

  # Require any additional compass plugins here.
 # Set this to the root of your project when deployed:
 http_path = "../../"
 css_dir = "../../src/main/webapp/css/"
 sass_dir = "../../src/main/webapp/sass"
 images_dir = "../../src/main/webapp/images"
 javascripts_dir = "../../src/main/webapp/javascripts"
 # To enable relative paths to assets via compass helper functions. Uncomment:
 # relative_assets = true
 

4. Now the last step is to integrate everything with Ant:

a) Loading JRuby into the claspath:

<path id="jruby.classpath">
    <fileset dir="lib/build">
        <include name="jruby*.jar"/>
    </fileset>
 </path>

b) Being able to invoke "ant compile.sass":

This will be basically used to convert *.sass files into *.css files and will be invoked automatically during the compile phase.

<target name="compile.sass">
     <java classname="org.jruby.Main" fork="true" failonerror="true" classpathref="jruby.classpath">
         <arg line="conf/compass/compile.rb ${basedir}/vendor/gems compile ${basedir}/conf/compass"/>
     </java>
 </target>
 

b) Being able to invoke "ant watch.sass":

This is very helpful in development mode as you can change the .sass file and verify the results just checking the browser.

<target name="watch.sass">
     <java classname="org.jruby.Main" fork="true" failonerror="true" classpathref="jruby.classpath">
         <arg line="conf/compass/compile.rb ${basedir}/vendor/gems watch ${basedir}/conf/compass"/>
     </java>
 </target>
 

c) Integrating with the compile phase:

<target name="compile.main" depends="setup-dependencies, compile.sass">
     <compile-folder folder="main" to="${main.classes.dir}" classpathref="main.dependencies"/>
</target>

If this was helpful or if you have any questions / suggestions, don't hesitate in writting a comment.