🥇 Retina Image Mixin para Compass

Este mixin Sass ajuda a aplicar imagens de fundo de alta resolução em sua folha de estilo. Você fornece a ele um caminho de imagem e as dimensões da imagem com resolução original. O mixin cria uma consulta de mídia spefically para telas de Retina, altera a imagem de fundo para os elementos do seletor para usar a variante de alta resolução (@ 2x) e aplica um tamanho de fundo da imagem original para manter as dimensões adequadas. Para usá-lo, baixe o mixin, importe ou inclua-o em sua folha de estilo do SASS e aplique-o aos elementos de sua escolha.

Sintaxe

 @mixin at2x($image_name, $w: auto, $h: auto, $extention: '.png') 

The extention defaults to PNG. To change this - define $extention when calling (ie jpg);

Passos

1.  Add the .at2x() mixin from retina.scss to your compass stylesheet (or reference it in an @import statement)
2.  In your stylesheet, call the .at2x() mixin anywhere instead of using background-image 

        #logo {
          @include at2x('example', 200px, 100px, .jpg);
        } 

Will compile to: 

        #logo {
          background-image: url('/images/example.jpg');
        }

        @media all and (-webkit-min-device-pixel-ratio: 1.5) {
          #logo {
            background-image: url('/images/exampe@2x.jpg');
            background-size: 200px 100px;
          }
        }

Related Posts