Skip to content

Instantly share code, notes, and snippets.

@simonpioli
Forked from thulstrup/compass-retina-sprites.scss
Last active December 12, 2015 02:29
Show Gist options
  • Save simonpioli/4699675 to your computer and use it in GitHub Desktop.
Save simonpioli/4699675 to your computer and use it in GitHub Desktop.
%sprites {
display: inline-block;
background-repeat: no-repeat;
background-image: sprite-url($sprites);
}
@mixin sprite($name, $dimensions: true, $pad: 0) {
@if ($dimensions == true) {
@include sprite-dimensions($sprites, $name);
}
@extend %sprites;
background-position: sprite-position($sprites, $name, -$pad, -$pad);
@if $pad > 0 {
padding: $pad;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
& {
$pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2);
background-image: sprite-url($sprites2x);
background-position: nth($pos, 1) nth($pos, 2) / 2;
@include background-size(ceil(image-width(sprite-path($sprites2x)) / 2), auto);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment