Using Compass Generated Sprite Sheets in Responsive Sass.

The power and time saving ability of this combination is well worth the setup time.

Jayson Jacobs
February 27, 2014

If you’ve used Sass and Compass, I’m sure you’d agree that the power and time saving ability of the combination is well worth the time required to set it up. If you haven’t tried it, well, get on it!

One of my favorite time-saving features is the ability to automatically generate sprite sheets from a directory of images. Another favorite is the ability to combine multiple files into one stylesheet. This is very useful when you’re writing responsive CSS, as it saves you from having to scroll between 500+ lines of CSS to find the same styles for different break points.

However, combine the two of those, and you’ve got a problem. The statements to include sprite sheets don’t fully work inside of media queries. This is because the default @include statement to add a sprite sheet uses @extend beneath the hood. There are many documented cases of @extend not working inside of media queries. If you try this, you’ll get the following warning at compile time, with a note that this will be an error in the next version of Sass.


A solution to this is to write a custom Sass mixin to explicitly return what you’re looking for.

In this case, I have different sprite sheets that I want to use for mobile and desktop. As in mobile is not just a 2x copy of the desktop version. I’m also not taking into account retina displays on newer Macbook Pros. You could certainly add a media query in this mixin to handle that circumstance if you wanted to.

First, you’ll want to make sure your config.rb is set up correctly. Note the “generated_images_dir” variable. Here’s mine:


If you’re using grunt, you’ll want to make sure your Compass options reflect this configuration as well.

Now, I’ve added some adjustment options in the case that your sprite positioning is off by a pixel or two. You could include more options if you need. If you took note from above, you’ll see that I added “generated/” to my sprite map-path. For whatever reason, the “generated_images_dir” variable is not taken into account and you’ll have to add your path manually. Relative to your images directory, of course.


Usage


Output


Like I mentioned above, you can add to this to provide a desktop retina version of your sprite sheet. You would do that by including your media query inside the mixin and adding some logic around that to output the correct lines.

Additionally, I should mention, in looking at the console output you’ll see that a sprite sheet is generated for each use of the mixin we just wrote. This is probably related to the fact that I had to manually include the generated sprites directory in the mixin because it doesn’t know that it generated the sprite sheet itself. It’s is obviously not ideal, or the most computationally efficient result. But, in the end, it will work.

Ok, now, go ahead. Tell me that’s not going to save you some time.

Read This.