Sass and Compass for the Non-Ruby Developers
by Andrew Kandels
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:
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.