Aqui está o menos mixin que eu uso para conseguir isso para imagens de fundo. retina.js não funciona para imagens de fundo se você estiver usando dotLess, uma vez que requer seu próprio mixin que usa avaliação de script que não é compatível com dotLess.
O truque com tudo isso é obter suporte para o IE8. Ele não pode definir o tamanho do plano de fundo facilmente, então o caso base (consulta de mídia não móvel) deve ser um ícone simples e não dimensionado. A consulta de mídia então lida com o caso de retina e é livre para usar a classe de tamanho de plano de fundo, já que a retina nunca será usada no IE8.
.retina-background-image( @path, @filename,@extension, @size )
{
.background-size( cover );
background-image: url( "@{path}@{filename}@{extension}" );
@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 )
{
background-image:url( "@{path}@{filename}@x2@{extension}" );
background-size:@size @size;
}
}
Amostra de uso:
.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );
Isso requer que você tenha dois arquivos:
start_grey-97_12.png
start_grey-97_12@2x.png
Onde o 2x
arquivo tem resolução dupla para retina.