less中&不能合并属性值，仅用于拼接父选择器；真正复用需用mixin封装属性组并参数化调用，编译后内联展开，避免冗余且支持条件分支。
Less 中的 & 合并选择器，不是合并属性值
Less 本身没有“Merge 功能”来把多个 CSS 属性值（比如多个 background-color、border）自动聚合成一个声明。你看到的“合并”，通常是误将嵌套规则中的 &（父选择器引用）或属性合并写法（如 border: 1px solid #000;）当成了“自动归并”。真实情况是：Less 不会重写或压缩输出的 CSS 属性——它只按你写的规则生成对应 CSS，重复声明照样输出多次。
例如：
.btn {
border: 1px solid #333;
border-radius: 4px;
border: 2px dashed red; /* 这行会覆盖上一行，但 Less 不会帮你删掉或合并 */
}
编译后就是两条 border 声明，浏览器取后者生效，但源码里仍是两个独立语句。
想减少冗余属性？用 Mixin + 参数控制更可靠
真正能“逻辑合并”的方式，是把一组相关属性封装进 Mixin，通过参数决定是否启用某部分，避免手动重复写又漏删：
-
.button-base(@border: true, @shadow: false)这类 Mixin 可以统一管理边框、阴影等组合逻辑 - 参数为
false时，对应样式块不输出，从源头避免冗余 - 比靠人眼识别“哪些属性可以合并”更稳定，也利于主题切换
示例：
.button-base(@border: true, @shadow: false) {
padding: 8px 16px;
font-size: 14px;
.if(@border) { border: 1px solid #ccc; }
.if(@shadow) { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
}
调用 .button-base(false, true); 就只生成 padding、font-size 和 box-shadow，没有 border。
多个值合并到单个属性？直接用空格分隔，别依赖 Less “智能合并”
CSS 本身支持多值写法（如 background、transform、transition），Less 只负责拼接字符串，不解析语义。所以你要做的，是主动把多个值组织成合法单属性：
-
background: url(img.png) no-repeat center / cover;—— 一条声明含图像、重复、定位、尺寸 -
transition: color 0.2s ease, opacity 0.3s linear;—— 多组过渡可逗号分隔 - 不要写两行
transition期望 Less 合并；它不会合并，只会输出两条，后者覆盖前者
Less 的作用止于字符串拼接，@color: #333; transition: color 0.2s ease, background-color 0.2s ease; 是安全的；但把 transition 拆到两个 Mixin 里再调用，就容易遗漏或顺序错乱。
编译后仍有多余声明？检查是否混淆了 Less 编译与 CSS 压缩阶段
很多人以为 Less 能像 PostCSS 插件（如 cssnano）那样删除重复属性、合并同类项——其实不能。Less 输出的是“语义正确但未压缩”的 CSS，后续必须交由专门工具处理：
- 开发时保留多条声明便于调试（比如临时加
border: 2px solid red;覆盖默认值） - 上线前用
cssnano或clean-css做压缩合并，它们才真正识别border多次声明并保留最后一个 - Webpack 用户注意：
less-loader只编译，css-minimizer-webpack-plugin才负责去重压缩
把优化责任错配给 Less，会导致构建流程混乱，也掩盖了真正该约束的编码习惯——比如不该在同一个选择器里反复覆盖同一属性。
Less 不做运行时推导，也不改写你的 CSS 语义。所谓“合并”，本质是人对样式的抽象能力，而不是语法糖能自动兜底的事。写的时候想清楚哪部分该抽成 Mixin，哪部分该用原生多值语法，编译后交给压缩工具收尾，这条链路才稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
