Skip to content

Instantly share code, notes, and snippets.

@darookee
Forked from boriskaiser/gist:3908158
Created November 7, 2012 15:35
Show Gist options
  • Save darookee/4032285 to your computer and use it in GitHub Desktop.
Save darookee/4032285 to your computer and use it in GitHub Desktop.
Easy retina-ready images using SCSS + Compass
@mixin background-2x($background, $file: 'png'){
$image: #{$background+"."+$file};
$image2x: #{$background+"@2x."+$file};
background: url($image) no-repeat;
@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: url($image2x);
background-size: image-width($image) image-height($image);
}
}
// usage for „logo.png” + „logo2x.png”
.logo{
@include background-2x('logo');
}
// usage for „logo.jpg” + „logo2x.jpg”
.logo{
@include background-2x('logo', 'jpg');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment