Skip to content

Instantly share code, notes, and snippets.

@jornki
Created November 7, 2012 20:01
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jornki/4034013 to your computer and use it in GitHub Desktop.
Save jornki/4034013 to your computer and use it in GitHub Desktop.
SCSS and Compass retina sprites
@import "compass/reset";
@import "compass/utilities/sprites";
@import "compass/css3/background-size";
$icons-spacing: 5px;
$sprites : sprite-map("icons/*.png");
@mixin retina-sprite($name) {
$name : $name;
background-image: sprite-url($sprites);
width: image-width(sprite-file($sprites, $name)) / 2;
height: image-height(sprite-file($sprites, $name)) / 2;
$ypos: nth(sprite-position($sprites, $name), 2) / 2;
background-position: 0 $ypos;
@include background-size(ceil(image-width(sprite-path($sprites)) / 2), auto);
}
@jornki
Copy link
Author

jornki commented Nov 7, 2012

usage: "@include retina(spritename);"

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