• Oct
  • 13
  • 2012

Sass and Compass for the Non-Ruby Developers

by Andrew Kandels

Sass, along with Compass, have proven themselves invaluable in my recent projects. Similar to the revolution jQuery brought to JavaScript, these tools make writing stylesheets consistent, efficient and DRY. All of the hassles with multi-browser prefixes (i.e: border-radius, box-shadow), generating sprites, and needless repetition are vastly lessened.

The only problem with tools like Sass or Less is that they're dependent on Ruby or Node.js. Although I enjoy them both, most of my projects are in PHP. Most PHP developers won't have Ruby handy, so this is a quick walk-through on getting things setup in projects of another language.

First, you'll need to install Ruby Gems, Ruby's package manager. If you're lucky enough to be on a newer distro and have root, it's likely as easy as apt-get install rubygems or yum install rubygems. If that fails, you might try RVM (Ruby's version manager) to do the install. If both fail, a final option is to use JRuby which is more portable and only requires Java.

To install Sass and Compass, first make sure your gems are up to date by running gem update --system and then install them with gem install compass. Slightly off topic, but if you're planning on incorporating Twitter's Bootstrap, a pure-Sass implementation can be installed at this time with gem install bootstrap-sass.

The next step is to create a configuration file in your project. While these can be passed as command line options, I find it best to create a config.rb file:

# If you installed bootstrap-sass in the previous 
# step and are using Twitter's Bootstrap
require 'bootstrap-sass';

# Set this to the root of your project when deployed:
CSS_dir = "public/CSS"
images_dir = "public/images"
javascripts_dir = "public/js"

sass_dir = "path/to/sCSS/files"
add_import_path "another/path/to/sCSS/files"
add_import_path "yet/another/path/to/sCSS/files"

output_style = :compressed
line_comments = false

Your Sass .sCSS file (along with any _*.sCSS imports) should be placed in the sass_dir or any of the add_import_path directories. I find add_import_path to work very nicely with Zend Framework 2 modules, allowing me to break up styles per-module and have them compile together into one public asset. Each file not beginning with an underscore will create of compiled CSS file of the same name.

Once you've created a non-underscore .sCSS file, run the compiler with:

# run once:
compass compile --config config.rb /path/to/project

# keep it running and recompile when the source file(s) change
compass watch --config config.rb /path/to/project

One final note, if you're doing team development, I strongly suggest not committing the compiled CSS file into source control. This minified CSS file will constantly conflict, causing more headache than it's worth. It's much easier to include the compilation step in your deployment process than to constantly be fussing with fixing merge conflicts.

Lastly, if you're not familiar with Sass, I strongly recommend checking out their website and reading their documentation. We're not replacing CSS with some fancy new language, your old CSS files will work exactly as they are in Sass. Sass extends CSS by adding handy features like mixins (i.e.: functions) and variables to reduce code repetition. Compass improves it even more by introducing things like auto-sprites as well as a battery of common mixins to alleviate cross-browser problems.