Skip to content

Instantly share code, notes, and snippets.

@thulstrup
Created March 20, 2012 19:18
Show Gist options
  • Save thulstrup/2140082 to your computer and use it in GitHub Desktop.
Save thulstrup/2140082 to your computer and use it in GitHub Desktop.
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 https://gist.github.com/2140082
@if (sprite-position($sprites, $name) != sprite-position($sprites-retina, $name)) {
$ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2);
background-position: 0 $ypos;
}
// Hard coded width of the normal sprite image. There must be a smarter way to do this.
@include background-size(444px auto);
background-image: sprite-url($sprites-retina);
}
}
// Usage.
.mail-icon {
@include sprite-background(mail);
}
@julkue
Copy link

julkue commented Jul 9, 2015

How to combine this mixin to get the image height of the sprite?

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