Skip to content

Instantly share code, notes, and snippets.

Created May 25, 2014 22:12
What would you like to do?
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;
Copy link

dviedma commented Oct 26, 2015

Genius! So nice and simple. Thanks!

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