Limitations of Compass spriting

March 24, 2014

Having used Sass for a while now, I’d never go back to straight CSS.

Compass is also a great time-saving extension, particularly for generating sprites.

Recently I came across a surprising bug in a site I was building.

A solid black arrow was being converted to a janky-looking greater-than symbol.

There seems to be a limit to the number of icons (or possibly the number of colours) that can be included in a generated sprite, as Doug Avery suggests.

This needs more research, but the simple fix was to split the sprites out into separate folders - for now I’ve gone with one for social icons, one for arrows, and one for other icons.