Skip to content

Instantly share code, notes, and snippets.

@evanshajed
Last active December 15, 2015 12:38
Show Gist options
  • Save evanshajed/5261200 to your computer and use it in GitHub Desktop.
Save evanshajed/5261200 to your computer and use it in GitHub Desktop.
SASS MIXIN for Retina Image Sprite
// SASS MIXIN for Retina Image Sprite
@mixin retina-sprite-background($name,$normal,$retina){
background-repeat: no-repeat;
background-image: sprite-url($normal);
background-position: sprite-position($normal,$name);
height:image-height(sprite-file($normal, $name));
width: image-width(sprite-file($normal, $name));
// Media Query for retina
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
background-image: sprite-url($retina);
background-position: 0 round(nth(sprite-position($retina, $name), 2) / 2);
height:round(image-height(sprite-file($retina, $name)) / 2);
width: round(image-width(sprite-file($retina, $name)) /2 );
// treat the @2x retina sprite sheet as 50% wide for double resolution upon display
$double-width:ceil(image-width(sprite-path($retina)) / 2);
$auto-height:auto;
@include background-size($double-width $auto-height);
}
}
@neotohin
Copy link

/**
//$spr-sprite-dimensions: true; // Enable this to auto add height and width
@import "spr/*.png";
*/

@mixin retina-sprite-background($name){
background-repeat: no-repeat;
@include normal-sprite( $name );
// Media Query for retina
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {

    background-repeat: no-repeat;
    @include retina-sprite( $name );  
      // treat the @2x retina sprite sheet as 50% wide for double resolution upon display
      $double-width:ceil(image-width(sprite-path($retina)) / 2);
      $auto-height:auto;
      @include background-size($double-width $auto-height);
     }

}

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