Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save michsch/3036217 to your computer and use it in GitHub Desktop.
Save michsch/3036217 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;
}
// sprite-url() doesn't work so i use sprite-path() like described in this gist comment:
// https://gist.github.com/2140082#gistcomment-378557
@include background-size(ceil(image-width(sprite-path($sprites-retina)) / 2) auto);
background-image: sprite-url($sprites-retina);
}
}
// Usage.
.mail-icon {
@include sprite-background(mail);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment