Skip to content

Instantly share code, notes, and snippets.

@e-river
Last active January 4, 2016 18:49
Show Gist options
  • Save e-river/8663220 to your computer and use it in GitHub Desktop.
Save e-river/8663220 to your computer and use it in GitHub Desktop.
Creating a image of CSS Sprite using compass
// Mixin for Creating a image of CSS Sprite using compass against Retina
// For use:
// .pdf-icon {
// @include retina-sprite-background(pdf);
// }
//
$sprite-map: sprite-map("sprite/*.png", $spacing: 100px);
$sprite-path: sprite-path($sprite-map);
$sprites-img: sprite-url($sprite-map);
$sprite-size: (image-width($sprite-path) / 2) (image-height($sprite-path) / 2);
@mixin retina-sprite-background($name) {
$image: sprite-file($sprite-map, $name);
$position: round(nth(sprite-position($sprite-map, $name), 2) / 2);
background-image: $sprites-img;
background-position: 0 $position;
background-repeat: no-repeat;
@include background-size($sprite-size);
width: image-width($image) / 2;
height: image-height($image) / 2;
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment