如何用LESS简化多分辨率媒体查询代码并添加class2？

当然可行！LESS的变量和混合（mixin）特性正好能帮你彻底简化这种重复度极高的媒体查询代码，让不同分辨率下的样式维护起来轻松太多。下面给你两种实用的优化思路：

方案一：按类组织样式（更适合统一管理单个类的全断点样式） #

首先把所有断点定义成变量，方便后续统一修改：

// 定义断点变量，后续改断点只需要修改这里
@breakpoint-sm: 600px;
@breakpoint-md: 1600px;
@breakpoint-lg: 1920px;
@breakpoint-lg-min: 1450px; // 注意原代码里少了px单位，要补上！

然后封装媒体查询的混合：

// 封装小屏幕媒体查询
.media-sm() {
  @media only screen and (max-width: @breakpoint-sm) {
    @content;
  }
}

// 封装中屏幕媒体查询
.media-md() {
  @media only screen and (max-width: @breakpoint-md) {
    @content;
  }
}

// 封装大屏幕媒体查询
.media-lg() {
  @media only screen and (max-width: @breakpoint-lg) and (min-width: @breakpoint-lg-min) {
    @content;
  }
}

接下来就可以把每个类的不同断点样式集中写在一起：

.class1 {
  .media-sm() {
    color: red;
  }
  .media-md() {
    color: red; // 这里可以根据需求改成不同颜色，比如green
  }
  .media-lg() {
    color: red; // 同理，比如yellow
  }
}

.class2 {
  .media-sm() {
    color: blue;
  }
  .media-md() {
    color: blue; // 比如改成purple
  }
  .media-lg() {
    color: blue; // 比如改成orange
  }
}

方案二：按断点组织样式（更贴近你原代码的结构） #

同样先定义断点变量，然后直接在混合里写对应断点下的所有类样式，最后调用混合即可：

@breakpoint-sm: 600px;
@breakpoint-md: 1600px;
@breakpoint-lg: 1920px;
@breakpoint-lg-min: 1450px;

// 小屏幕样式集合
.media-sm() {
  .class1 { color: red; }
  .class2 { color: blue; }
}

// 中屏幕样式集合
.media-md() {
  .class1 { color: green; } // 按需修改颜色
  .class2 { color: purple; }
}

// 大屏幕样式集合
.media-lg() {
  .class1 { color: yellow; }
  .class2 { color: orange; }
}

// 调用所有媒体查询混合
.media-sm();
.media-md();
.media-lg();

注意事项 #

• 原代码里的(min-width: 1450)缺少了px单位，LESS编译时会报错，一定要补上！
• 两种方案都能完美实现你的需求，选哪种取决于你的习惯：如果喜欢盯着单个类改全断点样式，选方案一；如果习惯按断点批量管理该尺寸下的所有类，选方案二。

内容的提问来源于stack exchange，提问作者Goffer