The Mauritius oil spill is an ecological disaster impacting livelihoods.
Please donate to Eco-Sud's cleanup fund
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.
I've just released the totally Compass-free Style 2. Here's the how & why...
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 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).
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)
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...
...which both defeated the purpose of having a baseline grid and is more opaque than just using pixels.
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.
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.