Skip to content

Instantly share code, notes, and snippets.

@sunny0425

sunny0425/sprite_icons.scss

Last active October 8, 2015 09:09
Show Gist options
  • Save sunny0425/087ee847d8793b28544e to your computer and use it in GitHub Desktop.
Save sunny0425/087ee847d8793b28544e to your computer and use it in GitHub Desktop.
Download ZIP
Sprite mixin, works perfectly with standard defines, refer to: http://www.sitepoint.com/css-techniques-for-retina-displays/
Raw
sprite_icons.scss
//Sprite mixin, works perfectly with standard defines
@mixin icons-sprite($sprite) {
background-image: sprite-url($icons);
background-position: sprite-position($icons, $sprite);
background-repeat: no-repeat;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-right: 3px;
height: round(image-height(sprite-file($icons, $sprite)));
width: round(image-width(sprite-file($icons, $sprite)));
@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
background-image: sprite-url($icons-2x);
background-size: round(image-width(sprite-path($icons-2x)) / 2) round(image-height(sprite-path($icons-2x)) / 2);
background-position: nth(sprite-position($icons-2x, $sprite), 1) / 2 nth(sprite-position($icons-2x, $sprite), 2) / 2;
height: round(image-height(sprite-file($icons-2x, $sprite)) / 2);
width: round(image-width(sprite-file($icons-2x, $sprite)) / 2);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment