Speed Up your Workflow with Sass & Compass

Adding New Tools to your Arsenal

As an interaction designer working with the Drupal CMS, there are so many open-source tools at our disposal. Finding which tools, frameworks and utilities work best within our workflow can be a job in itself.  So when a technology comes along that offers a dramatic improvement to how we operate, it’s something we celebrate. One technology that we’ve put into practice on on our new Drupal projects is Sass, a CSS pre-processing language. It can be combined with Compass, a full-fledged CSS authoring framework, it’s something we’ve started to include in our workflow that allows us to open up our toolbox and build well-architected Drupal sites that can evolve seamlessly.

Features of Sass

Sass stands for Syntactically Awesome Stylesheets.  It’s a superset of CSS3 that’s stocked with features that allow interaction designers to develop sites efficiently with plenty of support. For example, it supports nesting. So instead of writing a new rule for every property in a stylesheet, now you can nest rules inside each other, which allows you to follow a hierarchy and reduce redundancies in your code.

There are also variables that allow you to reference a style. So for instance, when you change a color, instead of doing a careful find-and-replace for all of the styles you’re looking to change, you can change in one place, and it will subsequently change that value throughout the site.

Another feature is mixins, which are snippets of code that you use over and over again. Rather than writing something out every time, you can include a mixin of one line of code, which again, is much more efficient to use and maintain.  It even allows you to use math, by combining these features.  Functions (which are kind of the next step to mixins), will define one a style that uses basic math to calculate the width of a grid, for example.

Adding Compass

Now, Sass in it of itself is great but pair it with Compass and you’re in a sweet spot. It includes a framework of commonly used code for CSS3, layout, resets, and typography that change your work from writing lines and lines of code, to built-in mixins, functions, resets and helpers that you can reuse throughout a site. It’s CSS3 Helpers allow you to develop cross-browser compatible code very easily.

For example, if you’re using a border radius, it will automatically generate the vendor-specific output for you. It also makes including web fonts simple by doing the dirty work for you.  And it keeps your stylesheet clean by using helpers for commonly used snippets, like clearfix for clearing floats.  It will also allow you to automatically generate sprites by specifying a the background image and tweaking a few properties without painstakingly doing it by hand.

Ease of Use and Support

What’s really blown me away about it is how intuitive it is to put into use. I had read a few articles about it and had a basic grasp on its purpose, but one look at the new and improved stylesheet and it came together quickly. Revisions are much easier using Sass’ variables and mixins.  Compass’ robust framework allows you to be standards compliant while still using the latest tricks. You can find a full reference guide and instructions to install at sass-lang.com.  As well as full documentation on Compass at compass-style.org.

If you have any questions on its use, feel free to contact us at Duo.  What is your experience  using Sass with Compass?