如果满足媒体查询条件，则更改 LESS 变量答案

【问题标题】：Change LESS variable if media query conditional is met如果满足媒体查询条件，则更改 LESS 变量
【发布时间】：2022-03-19 07:21:05
【问题描述】：

如果在我的样式表中满足某些媒体查询条件，我希望更改一些 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';
}

也许有更简单的解决方案？

【问题讨论】：

看看这个可能重复的问题：css, change less variable with @media。该答案与另一个类似问题有链接。基本上这是做不到的（这些答案告诉你为什么）。
css, change less variable with @media的可能重复

标签： variables media-queries less retina

【解决方案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");
}

【讨论】：