NO LONGER MAINTAINED

DUE TO TIME CONSTRAINTS OF THE ORIGINAL OSS DEVELOPER THE NIMBLE PLUGIN IS NO LONGER BEING MAINTAINED.

Using compass and Sass for CSS

This is a major topic that is best introduced with a video, take a few minutes to watch the intro below. We recommend you view in full screen mode.

Compass: A Real Stylesheet Framework from Chris Eppstein on Vimeo.

Compass is a stylesheet authoring tool that uses a the Sass stylesheet language to make your stylesheets smaller and your web site easier to maintain. Compass provides ports of the best of breed css frameworks that you can use without forcing you to use their presentational class names. It’s a new way of thinking about stylesheets.

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.

Once you start using Compass and SaSS as we do with Nimble we guarantee you won't go back to static stylesheets. The combination just makes life so much better.

Installing compass under JRuby

Firstly you'll need to acquire yourself JRuby. You can feel free to use the C++ based (or 'normal') Ruby interpreter if you prefer but we utilize JRuby for any ruby work we do to keep a consistent platform.

Add github gems as a resource

jruby -S gem sources -a http://gems.github.com

Install the compass gem

jruby -S gem install chriseppstein-compass

We're done!

Creating your SaSS templates

When Nimble was installed it added for you the directory src/sass as well as some helpful SaSS libraries that we've built as part of the Nimble project. Simply add your template files into this directory and start customising your interface.

Using Compass with JRuby

To invoke compass navigate to your project directory and execute

jruby -S compass -w --sass-dir src/sass --css-dir web-app/css

This creates static CSS output that your application and ultimately the web browser can consume. We run this daemon consistently during development so small changes are picked up and made to CSS straight away. You may however choose to only run it when you make a CSS change. THERE IS ABSOLUTELY NO REQUIREMENT TO RUN THIS OUTSIDE YOUR DEVELOPMENT ENVIRONMENT. You still ship the normal generated CSS with your production app.