box-shadow+ 是 Less 中唯一能稳定合并多层阴影的语法,因其属编译器硬编码白名单属性,支持逗号分隔多值;而 color+ 等单值属性不在白名单中,加 + 无效。

box-shadow+ 是 Less 中唯一能稳定合并多层阴影的语法,box-shadow 后面加 +(不是 + 或 _),才能让多次声明的值用逗号拼接;写成 box-shadow_ 或漏掉 + 都无效。
为什么 box-shadow+ 能合并,而 color+ 不行?
Less 的“合并”不是函数,是编译器对特定 CSS 属性的硬编码支持。只有白名单里的属性才认 + 后缀:box-shadow+、background+、transform+、filter+ 等。这些属性天然支持逗号分隔的多值语法(比如 box-shadow 本就允许多个阴影用逗号隔开)。而 color、font-size 这类单值属性不在白名单里,加 + 会被忽略或报错。
box-shadow+ 的写法和常见错误
- 必须写成
box-shadow+:形式,冒号后紧跟值,不能换行或加空格再写 - 多个值之间用逗号分隔,**不能加分号**:
box-shadow+: 0 0 2px red, 0 0 4px blue;✅;box-shadow+: 0 0 2px red; 0 0 4px blue;❌(编译失败) - 值中不能含注释,否则 Less 编译器会卡住或丢弃后续内容
- 如果某次声明用了普通
box-shadow:,它会覆盖之前所有box-shadow+的结果,而不是追加
对比:用 box-shadow+ 和手写逗号列表的区别
表面看效果一样,但语义和维护性不同:
- 手写逗号列表(如
box-shadow: a, b, c;)适合固定层数,一目了然 -
box-shadow+适合模块化场景:比如一个.card基础类定义一层阴影,.card--elevated在另一个文件里再加一层,不需修改原文件,也不怕顺序错乱 - 注意:所有
box-shadow+声明必须在同一个作用域内生效;跨@import时,导入顺序决定拼接顺序 - 编译后输出仍是标准 CSS,无运行时开销
别把 + 和 CSS 自带的 + 选择器搞混
Less 的 box-shadow+ 里的 + 是属性修饰符,和 CSS 选择器中的 +(相邻兄弟选择器)完全无关。有人误写成 box-shadow +:(中间有空格),这会被解析成选择器 box-shadow 后跟一个空格再加 :,直接编译报错。也有人搜 “less merge shadow” 试图找 merge() 函数,但 Less 根本没有这个函数——只有属性名后紧跟 + 这一种写法。
box-shadow+ 却没生效,优先检查是否被后面同名的普通 box-shadow: 覆盖了。


















