Skip to content

Instantly share code, notes, and snippets.

/retina-mixin.sass

Created January 8, 2013 19:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/4486855 to your computer and use it in GitHub Desktop.
Save anonymous/4486855 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
retina-mixin.sass
// Mixin: Automaticamente escreve
// USO:
// +background-2x(logo)
// Com imagem jpg:
// +background-2x(logo,jpg)
// Obs: Obrigatório ter a imagem normal e retina no mesmo diretório - "imagem.png" e "imagem@2x.png"
// OUTPUT CSS:
// #logo {
// width: 191px;
// height: 79px;
// top: 20px;
// background: url('/images/logo.png') 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) {
// #logo {
// background-image: url('/images/logo@2x.png');
// background-size: 191px 79px;
// }
// }
// --------------------------------------------------
=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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment