Изменить LESS-переменную, если условие медиа-запроса выполнено

Question

Я хочу изменить некоторые LESS-переменные (для поддержки путей с высоким разрешением изображения), если определенные условные условия медиа-запросов соблюдены во всей моей таблице стилей, но я не могу заставить его работать ,

// Default 
@logo:     'logo.png'; 
@sprite:     'sprite.png'; 

// High resolution displays 
@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and ( min--moz-device-pixel-ratio: 2), 
only screen and ( -o-min-device-pixel-ratio: 2/1), 
only screen and (  min-device-pixel-ratio: 2), 
only screen and (    min-resolution: 192dpi), 
only screen and (    min-resolution: 2dppx) { 
    @logo:    'logo@2x.png'; 
    @sprite:    'sprite@2x.png'; 
} 

Возможно, есть более легкое решение?

Answer 1

Вместо изменения имени файлов изображений для размещения изображений с высоким разрешением я сохраняю все свои изображения с высоким разрешением в отдельной папке «2x» с тем же именем.

@CDNURL: "http://cdn.mycommany.com/assets/"; 
@CDNURL-High-Res: "@{CDNURL}2x/"; 

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)", 
       ~"only screen and (min--moz-device-pixel-ratio: 1.5)", 
       ~"only screen and (-o-min-device-pixel-ratio: 3/2)", 
       ~"only screen and (min-device-pixel-ratio: 1.5)"; 

.BGImage-HD(@image) { 
    background-image: url('@{CDNURL}@{image}'); 

    @media @highdensity { 
    background-image: url('@{CDNURL-High-Res}@{image}'); 
    } 
} 

//Usage 
.logo { 
    .BGImage-HD("logo.png"); 
}