Alternatives to Compass

Originally posted as "Goodbye Compass", but that made it sound like I was glad to be rid of it. Compass was an amazing framework with a lot of thought behind it that made my life easier for years.

Around this time last year I threw together Style, a starting point for scalable, maintainable CSS architecture based on work I was doing in my day job at Envato.

Back then I couldn't see myself living without Compass' vendor prefixing, spriting tools & vertical rhythm. Plus it was a dependency of Susy, my favourite grid framework.

I've just released the totally Compass-free Style 2. Here's the how & why...

Vendor prefixes

Compass makes you use mixins for properties that need vendor prefixes. I was constantly googling "caniuse some-property" to find out if I needed to use the Compass mixin for that property.

Autoprefixer lets you just write the CSS properties without prefixes, then post-processes your CSS to add prefixes for browser versions you specify at compile time (using data from caniuse.com).

autoprefixer css/** -b "> 1%, last 2 versions, Firefox ESR, Explorer 9"

Also, Compass' much coarser browser support options are controlled by setting global config variables at the top of your Sass - a pattern that I'm rapidly moving away from in favour of importing dependencies where they're required (ironically, using a Compass plugin for now).

Update: Cross-browser support in Compass 1.0 will work differently, comparing usage thresholds that you set with usage data from caniuse.com.

Sprites

Here's what you need to use sprites in Sass:

  • Some source PNG files
  • A tool to combine those files into a single spritesheet
  • A few bits of information about each sprite:
    • Width & height
    • Location in the spritesheet (X & Y offset)

None of that really needs to happen at Sass compile time, which it does with Compass' spriting tools, so I've moved spriting completely out of the Sass compilation process.

I use spritesmith to combine PNGs into a spritesheet and generate an @import-able Sass file containing dimension & location information for each sprite:

// Generated by spritesmith
$sprite__logo__offset-x: -195px
$sprite__logo__offset-y: -392px
$sprite__logo__width: 105px
$sprite__logo__height: 21px
$sprite__logo__image: 'generated_sprites/logos.png'

Feeding that generated output into these mixins makes retina sprites super easy:

@import "generated_sprite_vars"
.logo
  @include sprite-2x($sprite__logo, $sprite-2x__logo)

Vertical rhythm

I should have listened to Jason Santa Maria 2 years ago - baseline grids on the web are more trouble than they're worth.

I ran into just about every issue he mentions in that post when using Compass' Vertical Rhythm. I also found myself writing ridiculous things like this...

margin-bottom: rhythm(0.7)

...which both defeated the purpose of having a baseline grid and is more opaque than just using pixels.

Susy 2

The Compass dependency is gone in the latest version of my favourite grid framework. Susy can now be used standalone via the Ruby gem, Bower component, or even just by copying some Sass files into your project.

Compilation

Moving vendor prefixing and spriting out of the Sass compilation process meant that the old compass compile command was no longer enough to build my CSS assets.

I started out using Gulp.js, but quickly ran into issues with the wrapper plugin for Sass.

Taking some inspiration from Tim Lucas and the Rdio team, I set up a little Makefile to handle the build. Now I'm not sure why I ever bothered with Grunt & Gulp at all.