Skip to content

Instantly share code, notes, and snippets.

@tomasdev
Created May 25, 2014 22:12
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomasdev/56bc62e86ab0700f8298 to your computer and use it in GitHub Desktop.
Save tomasdev/56bc62e86ab0700f8298 to your computer and use it in GitHub Desktop.
Compass Sprites with Retina support
// Only requirement: save all your .png files in 2x format. As this uses background-size, only IE9+ supported, but will look nice for both retina and non retina devices.
// Just because I like to use <span>s
.icon-sprite {
display: inline-block;
}
// Compass automagically generate sprites
@import 'icon/*.png';
// Override the mixin Compass core uses to generate the width/height/position and include background-size
@mixin sprite-background-position($map, $sprite, $offset-x, $offset-y, $fifth) {
$ypos: round(nth(sprite-position($map, $sprite), 2) / 2);
$width: image-width(sprite-path($map)) / 2;
$height: image-height(sprite-path($map)) / 2;
background-position: 0 $ypos;
background-size: $width $height;
height: sprite-height($map, $sprite) / 2 !important;
width: sprite-width($map, $sprite) / 2 !important;
}
// Print out all the classes, ready to go!
@include all-icon-sprites;
@dviedma
Copy link

dviedma commented Oct 26, 2015

HA! me acabo de dar cuenta que eres Tommy from block ;)

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