如果滿足媒體查詢條件，則更改LESS變量

如果在我的樣式表中滿足某些媒體查詢條件，但希望更改一些LESS變量（用於維護高分辨率圖像路徑），但似乎無法使其工作。如果滿足媒體查詢條件，則更改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:    '[email protected]'; 
    @sprite:    '[email protected]'; 
}

也許有更簡單的解決方案呢？

來源

2013-06-12 Staffan Estberg

看看這可能重複的問題：[CSS，更改與@media更少可變]（http://stackoverflow.com/questions/15927805/css-change-less-variable-with-media）。該答案與另一個類似問題有關。基本上這不能做（這些答案告訴你爲什麼）。 – ScottS

[css，使用@media更改變量少]的可能重複（https://stackoverflow.com/questions/15927805/css-change-less-variable-with-media） – goto

爲了適應高分辨率圖像，我將所有高分辨率圖像存儲在具有相同名稱的單獨「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"); 
}

來源

2014-03-27 21:17:42

如果滿足媒體查詢條件，則更改LESS變量

回答

相關問題