MENOS Mixin para sprites prontos para retina

Se você deseja deixar seus ícones prontos para a retina, há duas maneiras de fazer isso:

• Use ícones de fonte, como Font Awesome
• Fornece imagens alternativas de tamanho duplo que devem ser usadas para telas de retina.

Embora eu seja um fã de ícones de fonte, eles restringem o uso de ícones monocromáticos. Mixins e polyfills como retina.js funcionam bem também, mas ainda são muito complicados se você quiser usar sprites para combinar seus ícones em arquivos de imagem única (o que você deve fazer)! Aqui está um mixin MENOS que faz todo o trabalho manual para você. Basicamente, se você tiver uma imagem assim:

E HTML assim:

<i class="facebook"></i>
<i class="google"></i>
<i class="dribbble"></i>

Usando o seguinte .spritemixin

@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

.sprite (@path, @size, @w, @h, @pad: 0) when (isstring(@path))
    {
    background-image: url(@path);
    width: @size;
    height: @size;
    display: inline-block;
    @at2x_path: ~`@{path}.replace(/\.[\w\?=]+$/, function(match) { return "@2x" + match; })`;
    font-size: @size + @pad;
    @media @highdpi
        {
        background-image: url("@{at2x_path}");
        background-size: (@size + @pad) * @w   (@size + @pad) * @h;
        }
    }

.sprite(@x, @y)
    {
    background-position: -@x * 1em -@y * 1em;
    }

Você pode especificar seus sprites assim:

i
    {
    .sprite("icons.png", 20px, 3, 2, 5px);
    &.github   { .sprite(0, 0)}
    &.dribbble { .sprite(1, 0)}
    &.linkedin { .sprite(2, 0)}
    &.twitter  { .sprite(0, 1)}
    &.google   { .sprite(1, 1)}
    &.facebook { .sprite(2, 1)}
    }

Na primeira vez que chamamos .sprite, definimos o caminho para a imagem, a largura do ícone, o número de ícones em cada linha e coluna e o preenchimento entre os ícones. Então, para cada classe de ícone diferente, definimos a posição do ícone no arquivo sprite começando (0, 0)no canto superior esquerdo.

Em telas de retina, será substituído por , portanto, você terá que fornecer essas duas imagens. Isso usa o pequeno truque de definir o do elemento para largura + preenchimento do sprite para descobrir o deslocamento correto nas chamadas de ícone individuais. Isso nos restringe a usar sprites quadrados; se alguém tiver uma ideia melhor, por favor me avise!icons.pngicons@2x.pngfont-sizei