Less的+合并操作符仅对background+、transform+等白名单复合属性有效，通过同名多次声明实现值的逗号或空格拼接，不支持color+、margin+等非白名单属性，且必须在同一选择器内声明才能生效。
Less 中的 + 合并操作符只对列表有效，不是万能连接符
很多人看到文档里写“用 + 合并属性值”，就以为能像字符串拼接一样把任意两个值粘起来，结果发现 color: #f00 + #0f0; 报错，或者 margin: 10px + 20px; 算出 30px —— 这其实是 Less 的加法运算，不是合并。真正的“合并”（merge）仅发生在属性名带 _ 后缀、且值为列表时，由 Less 编译器自动触发。
关键点：Merge 是 Less 的**语法级特性**，不是函数或运算符，它只响应特定命名模式 + 列表值组合。
-
background-image+、transform+、box-shadow+这类带+后缀的属性名，是官方支持 merge 的白名单 - 值必须是 list（比如
url(a.png), url(b.png)或scale(1), rotate(90deg)），不能是单个值或计算结果 - 多个同名
xxx+声明会按顺序合并成一个属性，逗号分隔
正确写法：用 xxx+ 属性名 + 多个声明实现层叠式聚合
想让多个 transform 声明合并成一行，不能写 transform: scale(1); transform: rotate(90deg);——这会被覆盖。必须用 transform+：
.box {
transform+: scale(1);
transform+: rotate(90deg);
transform+: translateX(10px);
}
编译后生成：transform: scale(1), rotate(90deg), translateX(10px);
立即学习“前端免费学习笔记（深入）”；
- 顺序很重要：声明顺序 = 合并后函数顺序，影响最终渲染效果
- 不能混用
transform和transform+，否则后者会被前者覆盖 - 空格不是合并手段——
transform+: scale(1) rotate(90deg)会被当做一个函数调用，报错
哪些属性支持 merge？看 Less 源码里的 mergeListProperties 白名单
Less 并未在文档中完整列出所有支持 merge 的属性，实际以源码中 mergeListProperties 数组为准。常见可用的有：
-
background+、background-image+、background-position+ -
border+、border-color+、border-width+ -
box-shadow+、text-shadow+ -
transform+、filter+ -
transition+（但注意：各浏览器对多 transition 的解析不一致，慎用）
不支持的典型例子：margin+、padding+、color+ —— 写了也不会 merge，编译时直接忽略 +，当成普通属性处理。
容易被忽略的坑：嵌套作用域下 merge 不跨层级生效
merge 只在同一选择器内部、同一编译上下文中累积。下面这段代码不会合并：
.parent {
.child {
transform+: scale(1);
}
.child {
transform+: rotate(90deg);
}
}
因为两个 .child 是独立声明块，Less 不会跨块聚合。必须写成：
.parent .child {
transform+: scale(1);
transform+: rotate(90deg);
}
- Mixin 中使用
xxx+是安全的，会正确注入到调用处合并 - @import 进来的文件里定义的
xxx+，也能和主文件中的同名声明合并 - 但 CSS @layer、CSS 模块化（如 :global / :local）等现代机制与 Less merge 无协同，别混用
真正要用好 merge，得记住它本质是“同名列表累加器”，不是语法糖，也不是运行时行为——编译期就定死了，错了连 warning 都没有。
