如何减少Less编译后CSS重复代码的方法与技巧

归根结底，Less 编译后出现重复 CSS 代码，通常都和 @import、extend、mixin 这几种复用机制使用不当有关，或者说没有做好约束与管理。@import 一旦重复引入同一个文件，内容就会被反复插入；extend 如果跨文件使用前没有先导入目标，或者遗漏了 all，往往会在无提示的情况下失效；至于 mixin，只要多次调用，对应的样式代码就会被一次次展开，最终导致大量重复样式。

Less 编译后之所以会出现重复 CSS，问题通常不在语法本身，而在于 @import、extend、mixin 这三种机制没有正确使用，或者没有控制好使用边界。Less 本身不会自动执行去重处理，所谓“重复代码”，本质上就是你原本写下的结构，在编译阶段被完整展开并输出到了最终 CSS 中。

为什么 @import 会造成重复样式？

Less 默认不会做依赖去重，@import "mixins.less" 如果写了三次，就会插入三次相同内容。尤其是在多个组件文件分别 @import 同一个工具文件时，变量、mixin、extend 基类都会被重复复制，最终造成 CSS 体积膨胀。

• 使用 @import (once) 替代普通 @import，但要注意：导入路径必须完全一致（"./utils" 和 "utils" 会被视为不同文件）
• 将所有公共 @mixin、@function、变量统一收敛到单一入口文件（如 base.less），再由主入口通过 @import (once) "base.less" 引入
• 避免使用通配符导入：@import "components/*.less" 在多数 Less 版本中并不生效，同时也会破坏依赖关系的可追踪性
• 构建阶段启用 strictImports: true（如 less-loader 配置或命令行参数），让缺失文件立即报错，避免静默跳过后导致部分样式缺失

extend 为什么没有合并选择器？

extend 属于编译期的选择器合并机制，并不是运行时的去重方案。它只有在目标选择器真实存在，并且语法完全匹配时才会生效；一旦失效通常不会报错，但最终结果就是生成两个彼此独立的选择器，无法达到复用与精简 CSS 的目的。

• 跨文件使用前必须显式 @import 目标文件，否则 .btn-primary:extend(.btn) 会直接编译失败（报错 “selector not declared”）
• 目标选择器不能放在 @media、嵌套块或 mixin 动态生成结果中——extend 匹配的是最终输出的字符串，而不是代码语义
• 如果需要合并嵌套规则（例如 .btn:hover），必须添加 all：.btn-primary:extend(.btn all)，否则只会合并顶层声明
• 不要使用 extend 处理带参数的样式变体；它不支持变量和伪类目标（如 .btn:hover:extend(.btn) 无效），这类场景更适合使用 mixin

mixin 调用太多，CSS 体积为什么反而变大？

mixin 本质上是文本级插入工具，每调用一次，都会完整展开其中的全部声明。一个包含媒体查询和伪类的复杂 mixin 如果被调用 10 次，就会生成 10 份几乎相同的 CSS，从而明显增加编译后文件体积。

• 高频且简单的逻辑（如 .clearfix()、.center()）适合用 mixin；而包含多层嵌套、断点和状态控制的复杂逻辑，建议拆分为更细粒度的原子级单元（如 .rounded-sm()、.shadow-xs()）
• 避免在嵌套块中漏写 &：.card { &:hover { .transition() } } 才是正确写法；.card { :hover { .transition() } } 会输出全局 :hover，进而污染其他元素样式
• 无参 mixin 必须写空括号：.clearfix()，否则定义会被当作普通 class，调用时就会报 undefined mixin
• 颜色、尺寸等静态配置适合使用带参数的 mixin；而主题切换、暗黑模式等运行时响应场景，更适合使用 CSS 自定义属性，mixin 只负责生成基础结构

构建阶段还能优化和补救吗？

Less 编译器本身并不负责压缩、去重或合并选择器。所谓生产环境下的 CSS 体积优化，绝大多数都依赖 PostCSS 阶段完成，而不是仅靠 Less 自身配置来解决。

• 不要依赖 lessc --clean-css，它只能做基础压缩；更建议把 CSS 输出交给 cssnano 或 clean-css 等插件处理，它们才能真正合并重复声明、删除冗余选择器
• 确保处理顺序正确：Less → CSS → PostCSS（cssnano），不要颠倒；否则像 /* @preserve */ 注释或兼容性 hack 这类内容可能会被错误删除
• 禁用 Less 的 merge 功能（less-loader 中设置 math: 'strict'），它会尝试合并相邻规则，但容易出错，并且可能与 PostCSS 处理流程发生冲突
• 绝对 URL 导入（如 @import "https://cdn.example.com/normalize.less"）会拖慢构建并增加不可控依赖，建议统一改为本地 @import (reference)，或直接复制到项目内部管理

最容易被忽视的一点是：重复 CSS 往往并不是某一行 Less 代码写错了，而是整个导入链和样式复用策略没有收敛。与其只盯着某一个 mixin 是否重复，不如优先检查 main.less 的 @import 依赖树，这通常更能有效定位 Less 编译后重复代码的根源。