less 中没有 merge 特性，无法自动合并同名属性值；所谓“合并”实为手动拼接字符串或使用 join() 等函数生成合法 css 多值语法。
Less 中的 merge 是什么，它真能合并属性值吗？
不能。Less 官方语法里**没有 merge 特性**，也不存在“用逗号或空格自动合并 CSS 属性值”的内置机制。你看到的可能是对 extend、mixins、list 操作或某些插件/旧版文档的误读。CSS 本身不支持运行时“合并”同名属性值（比如把两个 margin: 10px 和 margin: 20px 合成一个），浏览器只会取最后声明的值。
哪些场景容易让人以为 Less 在“合并”属性？
实际是开发者手动拼接或利用 List 处理多个值，常见于以下情况：
-
多值属性如
background、transform、box-shadow：需用空格或逗号分隔多个函数/值，Less 可用join()或字符串插值生成 -
响应式断点叠加：用 mixin 接收多个
@media条件并拼成逗号分隔的查询列表 -
类名组合：用
extend实现样式复用，看起来像“合并”，实则是选择器继承
例如，想生成带多个阴影的规则：
.shadow-stack(@shadows...) {
box-shadow: ~"@{shadows}";
}
.shadow-stack(0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.15));
注意：~"@{shadows}" 是强制字符串输出，@shadows... 是可变参数，但最终靠你传入已用逗号分隔好的字符串 —— Less 不会自动帮你加逗号。
用 join() 和 extract() 手动拼接值列表
当你要从变量数组中生成逗号/空格分隔的值（比如字体栈、过渡属性），join() 最常用：
@fonts: "Helvetica", "Arial", sans-serif;
font-family: join(", ", @fonts); // → "Helvetica, Arial, sans-serif"
关键点：
-
join()第二个参数必须是 list 类型，不能是纯字符串 - 空格分隔要用
join(" ", @list)，不是join(" ", ...)—— 多余空格会被 CSS 压缩工具抹掉 - 如果 list 元素含引号，
join()保留它们；想去除？得先用extract()拆开再处理
为什么直接写逗号或空格“不生效”？
因为 Less 编译器按 CSS 语法规则解析：空格是分隔符，逗号常用于多值或多个声明。如果你写：
.btn {
margin: 10px 20px;
margin: 5px; // 这行会完全覆盖上一行，不是“合并”
结果只有 margin: 5px。同样，下面这种写法也不会合并：
@m1: 10px; @m2: 20px; margin: @m1, @m2; // 编译报错：Expected unit
Less 不允许在单个属性值位置放逗号分隔的两个独立值，除非你明确用 ~"..." 或 join() 构造合法字符串。
真正要小心的是：别依赖“隐式合并”，所有拼接逻辑必须显式写出，且提前确认目标 CSS 是否接受该格式（比如 background 支持多层逗号分隔，color 就不支持）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
