variables - 如果满足媒体查询条件，则更改 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");
}