Skip to content

Instantly share code, notes, and snippets.

@tomasdev tomasdev/style.scss
Created May 25, 2014

Embed
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;
@dviedma

This comment has been minimized.

Copy link

commented Oct 26, 2015

Genius! So nice and simple. Thanks!

@dviedma

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.