The Benefits of Dropping Compass as a Web Project Dependency

As much as I was enamored with Compass in its earlier days, frontend web development and tooling has evolved quite a bit since then, and I have begun removing Compass, a popular Sass extension, from my projects, reaping some benefits from doing so. The major benefits are faster Sass compiling and a shorter set of project dependencies (often the complete removal of Ruby gems as a dependency).

The Benefits of Dropping Compass

By dropping Compass in many of my projects, I’ve seen faster Sass compilation times, due to less code bloat. I’ll take any performance gains I can get! I’ve sped up Sass compile times even further by moving many of these projects to Libsass, a C/C++ port of the Sass compiler. As a Grunt user, this meant using the grunt-sass plugin instead of the grunt-contrib-sass plugin. If you’re able to follow this path, you can remove Ruby as a dependency for your project and lessen your project’s dependencies. This also makes it easier for contributors to pitch in on your project, as they won’t have to install and configure Ruby and worry about managing project-specific Ruby gem versions. Also note that two of the most popular CSS frameworks, Zurb Foundation and Bootstrap, no longer require the use of Compass. You can use the Libsass compiler with them as well.

Replacing Compass with Similar Functionality

If you do decide to remove Compass, you’ll no longer have access to its mixins for things like automatically adding in vendor prefixes, creating CSS sprites, and creating background images and transitions. However, as discussed in Hugo Giraudel’s article, there are alternatives. I now use grunt-autoprefixer to take care of adding vendor prefixes where needed automatically, and since I don’t use CSS sprites anymore (SVG is the way to go!), I have found I wasn’t using Compass sprite builder anyways. I’ve found that Sass’s native mixins for things like mixing colors work well enough for my needs, but there is always the option of manually copying and pasting a certain mixin from Compass into your project if you really find you need it. Another option to consider is to use Bourbon in your projects instead of Compass. It is known to be a lightweight Sass mixin library, and it has performance advantages over Compass. It also works with the Libsass Sass compiler.

Potential Problems

Removing Compass from your projects won’t always be completely straightforward, and there are some caveats. One important note is that the Libsass compiler, if you choose to use it instead of the normal Ruby-dependent Sass compiler, doesn’t have all the same functionality as the standard Sass compiler. Luckily, the Sass Compatibility site is available to see exactly what Libsass supports. Finally, I found that it was slightly more difficult to get Zurb Foundation and other tools set up properly for a new project without Compass. Expect that certain frameworks still assume that the majority of users use Compass, so you may see bugs. The benefits can be quite exponential though, so it’s often a path worth taking