Why I Don’t Use Compass Anymore

Share this article

Compass
is one hell of a project. It is by far the biggest Sass framework out there and since it is maintained by Chris Eppstein himself, one of the two Sass core designers, I don’t see it losing in popularity anytime soon. Yet, about a year ago or so, I stopped using Compass altogether. I removed it from our project at work. I removed it from my own site. I removed it from most of my side projects. So what happened? How could I move from “Compass is the best” to “I don’t need it anymore”? I think I just got better and more confident with Sass, to a point where Compass did not bring much to the table anymore. At least, it was not enough to be worth including it in a project, especially given that it slows Ruby Sass, already quite slow in itself… Let me put something straight before going any further: in no way am I saying that Compass is useless. Neither am I saying that you should get rid of Compass. I only want to show you other options and other ways of doing things, that do not require Compass to be part of the project. Now, to fully get why we can or cannot remove the Compass dependency, we need to understand what does Compass do at the end of the day. According to the docs, Compass provides: Everything else is pretty much accessory.

Autoprefixer does the same

Before Compass 1.0.0, prefixes were managed manually in Compass. It means whenever a new prefix was born or passed away, a pull request had to be submitted to Compass to remove the prefix from the relevant mixin. Not ideal… That’s why Chris moved to something smarter in v1.0.0, pulling data directly from CanIUse. Meanwhile, the very popular Autoprefixer library does the same. So at this point, both Compass and Autoprefixer are 100% up-to-date with vendor prefixes, yet there is still a major difference: you still have to use Compass mixins to prefix your properties and values, while Autoprefixer does it as part of your deployment process, post-processing your stylesheets. In order to have the following CSS output:
.unicorn {
-webkit-transform: translateX(42em);
-ms-transform: translateX(42em);
transform: translateX(42em);
}
You need to write this in Compass:
.unicorn {
@include transform(translateX(42em));
}
And this with Autoprefixer plugged in:
.unicorn {
transform: translateX(42em);
}
Not only is the latter easier and shorter, also in the hypothetical and marvelous future where we no longer need prefixes for the transform property, we don’t have to come back to the code to get rid of the mixin call. It’s all good.

You don’t need math everyday

I like how Sass provides us with the ability to perform math operations within our stylesheets. When we think about CSS preprocessors, we often mention variables and mixins, yet omit math support. This is a huge deal for a number-based language such as CSS. On top of that, Compass provides a few advanced math helpers, such as cos, sin, tan, sqrt, pow, pi and, perhaps, less usefully acos, asin, atan, logarithm
and e. In some cases, I have to admit having access to those functions might be useful. For instance, in a previous article I used cos and sin to build the perfect long-shadow mixin. A while back, I remember needing sqrt to properly align rotated pseudo-elements as part of a step-wizard. So there are use cases. Yet, they are so uncommon that I cannot consider Compass’ math helpers a valid reason to keep it in a project. It, for me, is just too anecdotal at this point. Especially since most of those functions can be polyfilled with nothing but Sass (thanks to basic math operations). For instance, here is a pure Sass version of the pow function:
/// Power function
/// @param {Number} $x
/// @param {Number} $n
/// @return {Number}
/// @source https://github.com/adambom/Sass-Math/blob/master/math.scss Sass-Math
@function pow($x, $n) {
$result: 1;

@if $n >= 0 {
@for $i from 1 through $n {
$result: $result * $x;
}
} @else {
@for $i from $n to 0 {
$result: $result / $x;
}
}
@return $result;
}
If you extensively need advanced math functions in Sass, may I recommend having a look at Sassy-Math, a lightweight Ruby Sass library providing everything math. If you want to polyfill a math function yourself, have a look at this article. Also, Ana Tudor has written about inverse trigonometric functions in Sass at The Sass Way.

You can polyfill color functions

I must say I am not an expert with Compass color functions since I never used any of them. The thing is Sass already provides so many native functions to deal with colors that I never felt like some more were needed. Although, that’s not entirely true. In Sass Guidelines I explain how I think using the mix function is often more appropriate than darken and lighten. To make using mix slightly easier, I wrote two very short functions that happen to exist in Compass:
/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage) {
@return mix($color, white, $percentage);
}

/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage) {
@return mix($color, black, $percentage);
}
Anyway, there again I don’t think this is enough to keep Compass exclusively for this.

You can do without image helpers

Let’s get to the real thing. Compass, being that it is written in Ruby, provides image helpers such as image-width and image-height that return an image’s dimensions based on a given path. How great is this, especially for image replacement techniques? This way you can size an element to fit an image, without worrying about the dimensions changing.
.logo {
$logo-path: '/assets/images/logo.png';
width: image-width($logo-path);
height: image-height($logo-path);
// ...
}
Unfortunately, there is no way for us to polyfill such a thing. Sass does not have access to the file system so it is not possible to figure out an image dimensions whatsoever. That being said, I personally tend to use less and less images in my work when using SVG or any equivalent is an option. Because SVG stands for scalable vector graphics, I think the need to know exact dimensions is getting lower everyday. As far as I am concerned, I have not missed this feature for a while now.

SVG Sprite Builders are legions

Okay, now we’re talking. The sprite builder has always been Compass’s main feature if you ask me. And for that reason, it is extremely well thought and convenient. Building a spritesheet from an image folder only takes a couple of minutes with Compass, if not less.
@import "compass/utilities/sprites";
@import "my-icons/*.png";
@include all-my-icons-sprites;
Fine. While there were no strict equivalent for image helpers, we all know that there are countless sprite builders out there. Take Grunticon for instance, a SVG sprite builder running on Grunt. It even comes with a browser-based app entitled Grumpicon. This is probably one of the best since it has been released by Filament Group but there are plenty of other choices, running on whatever tool floats your boat. So while it is nice having Compass doing that directly from our stylesheets, there are other options and it is indeed possible to handle sprites without having to use Compass. Along the same lines, I would find it very odd to use Compass only for the sprite builder, no matter how good it is. A sprite builder is a tool that can be completely dissociated from the stylesheet itself. There is no need for both to be intimately tied, even if it might present some benefits.

Final thoughts

Moving away from Compass, if that’s what you want, should be relatively simple. First, make sure you do not use any helpers from Compass such as tint or sqrt. If you do, polyfill them in your function files (just Google them, you’ll find a pure Sass version soon enough). Then, get rid of all your CSS prefixing mixins and set up Autoprefixer in your project (if that’s possible, obviously). Last, move to a custom sprite builder if you need it. Again, it is not that Compass is a bad tool or anything. Au contraire, Compass is a terrific framework! If you are happy with Compass, please keep using it. There is no point in dropping a tool you are happy with just because you read it from some article, so stick to Compass if you are fine with it. On the other hand, if you wonder whether it’s worth moving away from Compass because you don’t use much of it, then you might consider getting rid of it, as I did.

Frequently Asked Questions (FAQs) about Compass and SASS

Why is Compass no longer widely used in CSS pre-processing?

Compass was once a popular CSS pre-processing tool that provided a framework for SASS. However, its usage has declined over the years due to several reasons. Firstly, Compass is not actively maintained, which means it lacks updates and improvements. Secondly, it has a slower compilation time compared to other tools, which can hinder productivity. Lastly, many of Compass’s features, such as mixins and functions, have been incorporated into SASS, making Compass redundant for many developers.

What are the alternatives to Compass?

There are several alternatives to Compass that offer similar or better functionalities. These include Bourbon, a lightweight mixin library for SASS, and PostCSS, a tool that allows you to transform CSS with JavaScript. These alternatives are actively maintained and offer faster compilation times, making them more efficient for developers.

How does Compass compare to SASS?

Compass is a framework for SASS, meaning it provides additional functionalities to the SASS pre-processor. However, many of these functionalities have been incorporated into SASS itself, making Compass less necessary. Additionally, Compass is not actively maintained and has slower compilation times compared to SASS.

What are the career opportunities in Compass Group USA?

Compass Group USA offers a wide range of career opportunities in various fields, including culinary, sales, and management. They provide a supportive work environment and opportunities for growth and development. You can find more information about their job opportunities on their official website.

What is the difference between Compass and SASS?

Compass is a CSS authoring framework that uses SASS as its pre-processor. It provides additional functionalities, such as mixins and functions, to SASS. However, many of these features have been incorporated into SASS itself, making Compass less necessary for many developers. Additionally, Compass is not actively maintained and has slower compilation times compared to SASS.

How can I transition from using Compass to SASS?

Transitioning from Compass to SASS involves replacing Compass-specific mixins and functions with their SASS equivalents. This can be a straightforward process, as many of Compass’s features have been incorporated into SASS. However, it may require some time and effort to ensure that your CSS code is compatible with SASS.

What are the benefits of using SASS over Compass?

SASS offers several benefits over Compass. Firstly, it is actively maintained and regularly updated, ensuring that it stays relevant and efficient. Secondly, it has faster compilation times, which can improve productivity. Lastly, many of Compass’s features have been incorporated into SASS, making it a more comprehensive tool for CSS pre-processing.

Can I still use Compass for my projects?

While it is possible to still use Compass for your projects, it may not be the most efficient or effective tool. Compass is not actively maintained, which means it lacks updates and improvements. Additionally, many of its features have been incorporated into SASS, making it redundant for many developers.

What is the future of Compass?

The future of Compass is uncertain, as it is not actively maintained. Many of its features have been incorporated into SASS, making it less necessary for many developers. However, it may still be used in some projects that require its specific functionalities.

How can I learn more about CSS pre-processing?

There are many resources available online to learn about CSS pre-processing. Websites like GeeksforGeeks offer tutorials and articles on the topic. Additionally, you can find courses on platforms like Coursera and Udemy that cover CSS pre-processing in depth.

Kitty GiraudelKitty Giraudel
View Author

Non-binary trans accessibility & diversity advocate, frontend developer, author. Real life cat. She/they.

autoprefixercompasssasssass mixinsStuR
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week