Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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