Less中通过不同CSS类为单个HTML元素添加两张背景图失效咨询

问题原因 #

• Less 的 merge 特性（+: 语法）仅支持同一个规则块内的同名属性值合并，无法跨不同规则块做属性合并。
  你当前的写法中，&.img1 和 &.img2 是两个完全独立的规则块，Less 编译后会生成两条优先级相同的 CSS 规则：

div {
  border: 1px solid red;
  height: 200px;
}
div.img1 {
  background: url('https://via.placeholder.com/100/09f/fff') no-repeat left top;
}
div.img2 {
  background: url('https://via.placeholder.com/100/09f/fff') no-repeat right bottom;
}

根据 CSS 层叠规则，同优先级的规则后定义的会覆盖先定义的，因此只有 .img2 对应的背景图生效。

merge 特性的正确用法 #

只有当多个需要合并的属性写在同一个规则块内时，+: 才会生效，示例如下：

div {
  border: 1px solid red;
  height: 200px;
  background+: url('https://via.placeholder.com/100/09f/fff') no-repeat left top;
  background+: url('https://via.placeholder.com/100/09f/fff') no-repeat right bottom;
}

编译后会自动合并属性：

div {
  border: 1px solid red;
  height: 200px;
  background: url('https://via.placeholder.com/100/09f/fff') no-repeat left top, url('https://via.placeholder.com/100/09f/fff') no-repeat right bottom;
}

需求实现方案 #

如果要实现两个类分别控制背景、同时生效的效果，可以单独处理两个类同时存在的场景：

div {
  border: 1px solid red;
  height: 200px;
  
  &.img1 {
    background: url('https://via.placeholder.com/100/09f/fff') no-repeat left top;
  }
  &.img2 {
    background: url('https://via.placeholder.com/100/09f/fff') no-repeat right bottom;
  }
  // 两个类同时命中时合并背景
  &.img1.img2 {
    background: url('https://via.placeholder.com/100/09f/fff') no-repeat left top, url('https://via.placeholder.com/100/09f/fff') no-repeat right bottom;
  }
}

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