Sass retina image mixin

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);