less的merge是属性合并语法而非函数，仅对background+、transform+等少数css属性生效，通过+号实现值的逗号或空格拼接，不支持color+等非白名单属性。
Less里的merge不是函数，是属性合并语法
Less没有叫merge()的函数，所谓“Merge功能”实际是Less编译器对某些CSS属性的特殊语法支持：当属性名后跟+号（如background+），编译时会把多次声明的值用逗号或空格拼接。它只对少数原生CSS属性生效，不是通用合并工具。
常见误用是把它当成万能合并器，结果发现color+、font-size+完全不工作——因为这些属性根本不在Less的合并白名单里。
-
background+、transform+、filter+、box-shadow+等支持逗号分隔（多层效果） -
font+、margin+、padding+等支持空格分隔（简写展开） - 必须写成
property+:形式，漏掉+就只是普通覆盖 - 值之间不能有分号，否则编译报错：
background+: url(a.jpg), url(b.jpg);✅，但background+: url(a.jpg); url(b.jpg);❌
用background+叠加多张背景图
这是最典型也最稳定的merge用法。比如给一个元素同时加纹理图、渐变和图标，不用手动拼字符串。
Less写法：
.card {
background+: linear-gradient(45deg, #eee, #fff);
background+: url("pattern.png");
background+: url("icon.svg") no-repeat 10px 10px;
}
编译后生成标准CSS：
.card {
background: linear-gradient(45deg, #eee, #fff), url("pattern.png"), url("icon.svg") no-repeat 10px 10px;
}
- 顺序很重要：先写的在上层（视觉上更靠前）
- 不能混用
background和background+在同一选择器里，后者会被前者完全覆盖 - 如果某次声明带
background-size等子属性，它只会绑定到紧邻的那张图，不会自动分配
font+合并时容易丢掉line-height
font+按空格合并，但它只合并font简写能容纳的字段：字号、字体族、粗细、样式等。一旦你写了font+: 16px/24px "sans-serif";，斜杠后的line-height会被忽略——因为font简写本身不接受/语法（那是font-size的写法）。
- 正确做法：把
line-height单独写成line-height:声明，不参与font+ -
font+适合拼字体栈，比如font+: bold 14px "Helvetica";和font+: 14px "Arial", sans-serif;→ 编译为font: bold 14px "Helvetica", "Arial", sans-serif; - 别指望它处理
font-variation-settings这类新属性，Less老版本根本不识别
兼容性差，现代项目建议用CSS自定义属性替代
Less的+合并是编译期行为，无法运行时动态控制；而且Webpack或Vite里若用PostCSS插件处理CSS，它可能在Less编译后被二次解析，导致重复拼接或格式错乱。
- Vue/Svelte单文件组件中，
style lang="less"仍可用，但需确认构建链没启用postcss-less类插件 - 想实现类似逻辑又保持灵活性？改用CSS变量：
--bg-layers: linear-gradient(...), url(...); background: var(--bg-layers); - 真正需要条件合并时（比如根据主题切换阴影），用Less的
.mixin比硬凑+更可控
说到底，+是个小众语法糖，只在特定属性、特定场景下省几行代码。一旦需求变复杂，比如要动态增删某一层背景，或者做浏览器兼容降级，它立刻变成绊脚石。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
