Image Sprites without Compass – Part 1

I’ve been long interested in migrating from Compass to LibSass for Sass compilation – mainly for performance reasons – but a few things have held me back. The main issue is image sprites.

These days I use vectors everywhere I can (either in an icon font via IcoMoon or svgs in CSS via Grunticon or most recently in a SVG sprite via svg-store) but sometimes I run into a situation where I just need to use a png for a small image due to the complexity or lack of a vector resource in the PSD. In these cases I’ve always fallen back on image sprites with Compass – but I was sure that it wasn’t the only way forward.

Recently I did some research on different ways to handle image sprites without Compass. First, I identified my requirements:

Automated
I use grunt and I wanted to be able to make it easy to update the sprite file with a simple grunt command
Integrated
Since I use Sass I needed the solution to be able to generate something that I could easily import into my Sass code
Helpers
I’ve grown quite attached to the helpers that Compass provides for easy access to sprite icon heights and positions – they make the styling much easier so any solution needed to provide similar capabilities
Mature
It would be nice if the solution had been around for a while and wasn’t just someone’s side project in danger of being abandoned

I did some basic online research (googling) and looked at several different solutions before settling on grunt-spritesmith.

grunt-spritesmith has some very robust options and meets all of my requirements above:

Automated
It is a grunt task and is easy to integrate into my process
Integrated
It can generate an SCSS include file with with variables for sprite values
Helpers
The generated SCSS file includes helpers for accessing various sprite details
Mature
It is currently at version 4.5.1 with version 1.1.0 having been released almost 2 years ago

My experience getting grunt-spritesmith setup and running was practically flawless. It was easy to integrate into grunt and include the generated SCSS file into my Sass build – the only minor sticking point is that I had to write a helper function to easily translate from sprite image names (used by Compass) to sprite data lists (used by grunt-spritesmith).

In a future post, I’ll dive deeper into getting grunt-spritesmith setup and working and provide a detailed guide and repository link to getting it up and running.