Sass retina background mixin

Como eu, você é um ninja front-end e segue os princípios DRY . Aqui está um mixin muito legal para gerar uma imagem de fundo para exibição de retina.

Suponha que você já tenha definido uma variável $retinaem algum lugar em seus arquivos scss.

$retina: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-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)";

mixin

@mixin retina-background-image($file, $type, $width, $height) {
  background-image: url($file + '.' + $type);
  @media #{$retina} {
    background-image: url($file + '@2x.' + $type);
    @include background-size($width, $height);
  }
}

Uso

Você apenas define o caminho da imagem, o tipo de imagem e, eventualmente, o tamanho do fundo

@include retina-background-image("images/video", "png", 50%, 50%);