Why I Don't Use Compass Anymore

Originally published at: http://www.sitepoint.com/dont-use-compass-anymore/

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:

Continue reading this article on SitePoint

As someone who doesn’t work in Ruby and likes to incorporate SASS into the build process, Compass has always seemed like an unnecessary extra to me.

Thanks for going ahead and saying this. For most part, I have never used compass or any of it’s dependencies. In fact, my workflow would have zero ruby had it not been for Sass in the initial days. I like how we are all moving away from cluttered and confusing workflows to simple. Coming from you, especially, I think this is good education. I also enjoyed your other post on keeping it simple.

Nice! I stoped woking with compass on my projects too.
I appreciate the autoprefixr suggestion.
Compass sticky-footer is a nice nice compass module (http://compass-style.org/reference/compass/layout/sticky_footer/) but is really easy to develop a custom solution.
bourbon.io is a lighter alternative for css3 prefixes mixins.

Left Compass behind a while ago for Libsass and Autoprefixer. However - some of the projects I contract with require it. I found that manually porting in the Compass mixins (Igosuki has compass-mixins built for bower and libsass ) allows me to seamlessly contribute to Compass projects without affecting my build process

Nice writeup. I felt the same way a while back and really didn’t see any usage for Compass after adding Autoprefixer into my workflow but recently brought it back since it’s core dependency for breakpoint and I also discovered it has some nice helpers for inlining images and fonts.

I couldn’t agree more. Whenever I’m working on a project that uses Compass I can’t help but think it isn’t even needed and definitely isn’t worth the extra compile times.

Like you said it’s incredibly useful for some people but I’m not one of them.

Oh forgot to mention. Compass contrast function is super rad. The one that you use to check if the background is dark or light and then set the text-color based on that is very useful. They also have a yiq color scheme, which is useful for when the previous function doesn’t function properly. I didn’t even know there was a yiq scheme but that was super useful when you design separately and hand over a styleguide to developers.

I’ve hated compass for ages. The mixins are so needlessly long!
The only reason I would use compass is for the auto-sprite but now that I’ve found Grunt Spritesmith I never have to use compass ever again! :smiley:

I agree with everything. I changed my whole scss boilerplate to a compass-free workflow, after all, I only used compass for prefixing anyway. I’m just very glad, that susy doesn’t depend on compass anymore since 2.0.

The one thing that keeps me using Compass and that isn’t mentioned in the article is plugins or extensions like Modular Scale.

Things like Susy and Breakpoint have moved away from Compass as a dependency, which is great. But there are still a few out there that require Compass, and even ones that can be used Sass only don’t always have all of the same features as the Compass version.

Modular scale is faster and can only use non-integer values with Compass, for example.

Same here, I stopped using Compass about a year ago.

My circumstances for why I stopped using Compass are a bit different and nowhere near as elaborate as yours Hugo :p.,

When I started learning Sass dealing with vendor prefixes was problematic. Enter Compass. And that’s basically the only reason I used it for. Nothing else.

I was compiling via the CMD so every time I wanted to use and advanced CSS3 property, I had to go hunt down the mixin in the Compass site, figure out where the mixin I needed was in the huge list of options and variations it has, then add it to the top of my main SCSS file and then call the mixin. For each and ever single advanced CSS3 property that needed prefixing.

Then I found Prepros and Koala App which allowed me to harness the power of Autoprefixer so all I needed to do was to write the CSS3 property as the spec said and be done, no worries about prefixing anymore.

Truth be told, I owe a lot of the little I know about Sass to Compass because although it was a lot of work implementing its mixins, it allow me to see and understand the power of Sass and question my own process and become a better professional.

Thanks for sharing Hugo.

I’m a little trapped in compass because of the awesome font mixin @include font-face() and
inline-font-files() to convert them to base64, do you know any replacemente for this?

Great article. I’ve been using Compass but will now look at removing it from our web app project. Thanks.

btw - saw a couple of typos in the article:

  • SVG Sprite Builder are legions > SVG Sprite Builders are legion
  • there are countless of sprite builders > there are countless sprite builders
  • plenty of over choices > plenty of other choices
  • whenever a new prefix bore or passed away > whenever a new prefix [?] passed away

Shameless self-promotion: Last week I published a gulp-plugin for polyfilling the compass image-helper functions: https://github.com/phlppschrr/gulp-compass-imagehelper

1 Like

@phlppschrr So why don’t you post it in the Showcase category and tell us a bit about it? :slight_smile:

1 Like

Hey Adrian – Thanks for catching these. I’ve edited the article and updated it. Let us know how you get on removing Compass! :slight_smile:


What’s about vertical rhythm?

Great article.

I’m trying to ditch Compass but I’m trapped with the image helpers, I find them really useful as I work with a lot of images in my projects, designers in my team seem to love background images, so I still use them. Any advice on a cool ruby-gem doing just the image helpers thing?

If you prefered Autoprefixer rather that Compass, maybe you should look at PostCSS. Autoprefixer is based on this CSS processor, like Compass is based on Sass. And PostCSS has many other great tools: https://github.com/postcss/postcss