less 的 merge 功能对 box-shadow 和 background 无效，因其仅支持逗号分隔的列表型属性（如 transform），而 box-shadow 虽支持多值但编译器仅作字符串拼接，background 作为复合简写更无法解析；应改用 list + join() 显式构造。
Less 的 merge 功能不能直接合并 box-shadow 或 background 这类复合值——它只对带逗号分隔的列表型属性（如 transform、filter）生效，且需显式声明 + 操作符。试图用它处理阴影或多重背景，大概率会得到意外字符串拼接，而非你想要的层叠效果。
为什么 merge 对 box-shadow 无效
Less 的 merge（即 + 后缀）本质是将多个同名属性“堆叠”为一条声明，中间用逗号分隔。但 box-shadow 原生支持多值逗号分隔，问题在于 Less 编译器不会自动识别其语法结构，而是把整个值当字符串处理：
.btn {
box-shadow+: 0 2px 4px rgba(0,0,0,0.1);
box-shadow+: 0 0 0 2px #007bff;
}
这段代码看似合理，但实际输出是：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 0 0 2px #007bff;
——这确实是合法 CSS，但风险在于：如果某处用了非逗号分隔的写法（比如带 inset），或中间混入了空值、变量未定义，merge 就会静默拼接出无效语法，浏览器直接丢弃整条声明。
- 不检查值合法性，只做字符串连接
- 无法区分
inset和普通阴影，容易错序 - 与
@media或嵌套规则结合时，+行为不可预测
真正可靠的方式：用 List + join() 构造多重阴影
把阴影定义为 list 变量，再用 join() 显式拼接，能完全掌控格式和容错：
@shadows-base: 0 2px 4px rgba(0,0,0,0.1);
@shadows-focus: 0 0 0 2px fade(#007bff, 50%);
.btn {
box-shadow: join(', ', @shadows-base @shadows-focus);
}
这样输出干净，且可轻松扩展：
- 支持条件追加：
join(', ', @shadows-base @shadows-hover when (@hover-enabled)) - 可过滤空值：
join(', ', filter(@shadow-list, 'isstring')) - 避免无意中引入多余空格或换行
多重背景必须手动拆解，merge 完全不适用
background 是 shorthand，Less 的 merge 无法解析其内部结构。下面写法是危险的：
.card {
background+: linear-gradient(to bottom, #fff, #f5f5f5);
background+: url('img/bg-pattern.png') repeat;
}
结果会是：background: linear-gradient(...), url(...) —— 看似正确，但丢失了所有其他默认值（background-position、background-size 等），导致图案错位或拉伸。
正确做法是用 background-image、background-position 等长属性分别控制，并用 list + join() 组装 background-image：
@bg-images: linear-gradient(to bottom, #fff, #f5f5f5), url('img/bg-pattern.png');
@bg-positions: center, center;
@bg-sizes: cover, auto;
.card {
background-image: join(', ', @bg-images);
background-position: join(', ', @bg-positions);
background-size: join(', ', @bg-sizes);
}
复杂点在于：多重背景各层的 repeat、attachment 等必须一一对应；一旦某层缺失某个子属性，浏览器会回退到初始值，而不是继承上一层——这点很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
