Skip to content

Instantly share code, notes, and snippets.

Created March 20, 2012 19:18
Star You must be signed in to star a gist
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
@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);
Copy link

I believe i figured it out how to declare all the sprites in the map. Works well on top of whats above.

$sprite-names: sprite_names($icon-sprites);
@each $sprite in $sprite-names {
    .icon-#{$sprite} {
      @include icon-sprite($sprite, true);

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