基于媒体查询减少mixin

我有两个精灵:

一个带有"正常"分辨率的图标;

一个带有"高"分辨率的图标;

我使用以下mixins生成Less文件:

对于"普通精灵":

   .sprite-icon_back() {
        width: 25px;
        height: 25px;
        background: url('/Content/icons/mobile-icons-sprite.png') 0 0;
    }

    .sprite-icon_access() {
        width: 48px;
        height: 48px;
        background: url('/Content/icons/mobile-icons-sprite.png') 0 -25px;
    }

对于"高精灵":

   .sprite-icon_back() {
        width: 100px;
        height: 100px;
        background: url('/Content/icons/HighRes/mobile-icons-sprite-high.png') 0 0;
    }

    .sprite-icon_access() {
        width: 50px;
        height: 50px;
        background: url('/Content/icons/HighRes/mobile-icons-sprite-high.png') -100px 0;
    }

班级名称:

.m-icon-back {
    .sprite-icon_back();
}

.m-icon-access{
    .sprite-icon_access();
}

所以,当我检测到以下媒体查询时,我想使用高混合:

@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio : 2) {
}

我怎么能background-image根据媒体查询更改(png文件)？我真的不知道这是否可能,但我愿意接受新的解决方案/替代方案.