Um pequeno mixin organizado para trocar imagens de baixa resolução e retina em css.
Adaptado de http://chrisltd.com/blog/2013/05/retina-images-sass/
Mixin
@mixin retina-image($context, $file, $type, $width, $height) {
background-image: url((asset-path($context + '/' + $file + '.' + $type)));
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
& {
background-image: url((asset-path($context + '/' + $file + '@2x.' + $type)));
-webkit-background-size: $width $height;
-moz-background-size: $width $height;
-o-background-size: $width $height;
background-size: $width $height;
}
}
}
Definições de variáveis
$ context: O nome da subpasta dentro do diretório de ativos / imagens
$ context + ‘/’ pode ser removido se você não tiver subdiretórios de imagem
$ file: Nome do arquivo sem extensão
$ tipo: extensão (png, jpg, etc.)
$ largura, $ altura: largura / altura em pixels da imagem normal (não a versão 2x)
Uso
@include retina-image (home, logo, png, 143px, 40px);