Skip to content

Instantly share code, notes, and snippets.

@renatocarvalho
Forked from boriskaiser/gist:3908158
Created December 10, 2012 14:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save renatocarvalho/4250910 to your computer and use it in GitHub Desktop.
Save renatocarvalho/4250910 to your computer and use it in GitHub Desktop.
Easy retina-ready images using SASS + Compass
=background-2x($background, $file: 'png')
$image: #{$background+"."+$file}
$image2x: #{$background+"@2x."+$file}
background: image-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: image-url($image2x)
background-size: image-width($image) image-height($image)
// usage for „logo.png” + „logo2x.png”
.logo
+background-2x('logo')
// usage for „logo.jpg” + „logo2x.jpg”
.logo
+background-2x('logo', 'jpg')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment