Retina images, @1x, @2x, @3x with extra options for background size etc.

retina.less

// Extended version of Bootstrap's img-retina mixin
// - adds @3x support
// - lets you limit the application of the image by queries other than dpi/pixel-ratio
// - lets you specify a single-parameter background size, like background-size: cover;
.img-retina-extended(@file-1x; @file-2x; @file-3x; @width-1x; @height-1x: 'not-set'; @query1: 'min-width'; @queryValue1: 0px) {
    // @1x
    @media only screen and (~"@{query1}: @{queryValue1}") {
        background-image: url("@{file-1x}");
        .img-retina-bg-size(@width-1x; @height-1x);
    }
    // @2x
    .img-retina-query(@file-2x; @width-1x; @height-1x; 2; 192dpi; @query1; @queryValue1);
    // @3x
    .img-retina-query(@file-3x; @width-1x; @height-1x; 3; 400dpi; @query1; @queryValue1);
}

.img-retina-query(@file; @width; @height; @multiplier; @dpi; @query1; @queryValue1) {
    @media
        only screen and (-webkit-min-device-pixel-ratio: @multiplier) and (~"@{query1}: @{queryValue1}"),
        only screen and ( min--moz-device-pixel-ratio: @multiplier) and (~"@{query1}: @{queryValue1}"),
        only screen and ( -o-min-device-pixel-ratio: ~"@{multiplier}/1") and (~"@{query1}: @{queryValue1}"),
        only screen and ( min-device-pixel-ratio: @multiplier) and (~"@{query1}: @{queryValue1}"),
        only screen and ( min-resolution: @dpi) and (~"@{query1}: @{queryValue1}"),
        only screen and ( min-resolution: ~"@{multiplier}dppx") and (~"@{query1}: @{queryValue1}") {
            background-image: url("@{file}");
            .img-retina-bg-size(@width; @height);
    }
}

.img-retina-bg-size(@width; @height) {
    & when (@height = 'not-set') {
        background-size: @width;
    }
    & when not (@height = 'not-set') {
        background-size: @width @height;
    }
}