Create a CSS spritesheet with ImageMagick and SASS

Create a CSS spritesheet with ImageMagick and SASS

I have to do this much more than I enjoy and for some reason I never documented it before. Finding the information to do this is always much harder than it needs to be so I decided to document it all in on neat post.

The example below will generate a vertical spritesheet from all the png files in the current folder and then using SASS we can generate the CSS code necessary to use any of those sprite sheets in our application based on an offset reference number.

Creating the spritesheet

 

SASS code

 

Dave

About David Parlevliet

Dave is long time developer with a passion toward teaching. He divides his time between his wife, her cat and his projects. He recently started using twitter so make sure to follow him!