🥇 Uma @mixin para imagens de retina em sass

Usando o SASS, podemos combinar consultas de mídia e substituição de imagem CSS para enviar imagens de alta resolução para dispositivos retina e imagens de resolução padrão em todos os outros lugares.

@mixin image-retina( $filename , $extension, $width , $height ) {
  background-image: url($filename + '.' + $extension);

  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    & {
      background-image: url($filename + '@2x.' + $extension);
      -webkit-background-size: $width $height;
    }
  }
}

O mixin assume que nossos arquivos retina são sempre nomeados com @ 2x entre o nome do arquivo e a extensão (como nosso exemplo myImage .png e myImage @ 2x .png).

Related Posts