Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Using Compass to generate normal and retina sprite maps
$sprites: sprite-map("sprites/*.png");
$sprites-retina: sprite-map("sprites-retina/*.png");
@mixin sprite-background($name) {
background-image: sprite-url($sprites);
background-position: sprite-position($sprites, $name);
background-repeat: no-repeat;
display: block;
height: image-height(sprite-file($sprites, $name));
width: image-width(sprite-file($sprites, $name));
@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2) {
// Workaround for
@if (sprite-position($sprites, $name) != sprite-position($sprites-retina, $name)) {
$ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2);
background-position: 0 $ypos;
@include background-size(image-width(sprite-file($sprites, $name)) auto);
background-image: sprite-url($sprites-retina);
// Usage.
.mail-icon {
@include sprite-background(mail);
Copy link

stereoscott commented Jul 4, 2012

The workaround listed on line 13 wasn't working for me... I had a sprite image with about 5 images, and the sprite generator created the 2x sprites in a different order than the 1x sprites and for whatever reason the if statement was not picking up the difference. I removed the if statement and always set the y-position for the 2x styles and that fixed it for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment