Less中同名属性不会自动合并，必须手动干预；推荐用.mixin封装复用属性块，:extend()仅限语义一致场景且有权重隐患；真正减体积依赖构建工具如cssnano或Vite的cssMinify。
Less中同名属性不会自动合并，必须手动干预
Less本身不提供“自动合并重复CSS声明”的能力。比如你写了两次color，它就真会输出两遍——编译器只做静态替换和拼接，不做语义分析或去重。所谓“合并同名属性”，本质是避免写重复，而不是指望编译器帮你擦屁股。
用.mixin封装可复用的属性块，而非重复书写
这是最直接、最可控的“合并”方式：把一组稳定不变的声明抽成混入，再在多处调用。编译后若多个选择器都用了同一个.mixin，它们各自生成完整样式块，但源码层面已消除重复。
- ✅ 推荐写法：
.text-emphasis { color: @primary-color; font-weight: 600; }，然后在.btn、.label里都调用.text-emphasis() - ❌ 错误写法：在
.btn里写一遍color和font-weight，又在.label里照抄一遍 - ⚠️ 注意：
.mixin调用不改变选择器权重，也不会压缩最终CSS体积；想减体积得靠构建工具（如cssnano）后处理
用:extend()合并选择器，但仅限语义一致场景
:extend()会在编译时把多个选择器合并到同一行CSS规则中，视觉上像“合并了属性”，实际是共享选择器。但它有强约束，不是万能胶。
- ✅ 安全场景：
.btn-primary:extend(.btn)+.btn-secondary:extend(.btn)→ 编译后生成.btn, .btn-primary, .btn-secondary { ... } - ❌ 禁止跨文件使用：
@import顺序错或目标选择器未定义，会报Unknown pseudo-class or pseudo-element extend - ⚠️ 隐患：
:extend()提升选择器权重，.btn:extend(.disabled)会把.disabled的权重带到.btn上，可能破坏覆盖逻辑
真正减体积靠构建工具，不是Less语法
Less编译输出的是“人写的结构”，不是“浏览器要的最小集合”。即使你用尽mixin和extend，最终CSS仍可能含冗余。关键收口在打包阶段：
立即学习“前端免费学习笔记（深入）”；
- Webpack用户务必配
MiniCssExtractPlugin+css-minimizer-webpack-plugin，启用mergeLonghand等压缩选项 - Vite默认开
build.cssMinify，但需确认是否启用了lightningcss或esbuild后端，它们对重复声明识别更准 - 别依赖
@import顺序“假装拆分”——index.less里@import 'a.less'; @import 'b.less';仍会合成一个CSS文件，体积没变
最易被忽略的一点：:extend()看起来省代码，但一旦用错作用域或跨模块调用，反而让调试链路断裂。与其赌编译器聪明，不如把复用逻辑锁死在.mixin里，再交由压缩工具收尾。
