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.