retinasprites.less

// Provides mixins that automatically replace sprite icons with retina images on appropriate devices.

@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;
    }

// Usage:


i
    {
    .sprite("../icons.png", 20px, 3, 2, 5px);
    margin: 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)}
    }