less 的 mixin 会重复输出 css 是因其静态文本展开机制，每次调用都原样复制整个块内容，导致冗余声明。
为什么 mixin 会重复输出 CSS
Less 的 mixin 是静态文本展开机制，不是运行时函数。每次调用 .btn()，编译器就把整个块内容原样复制进去——哪怕 10 个组件都调用了同一个 .btn(@color: #007bff)，最终 CSS 就有 10 份一模一样的 color: #007bff; 声明。这不是 bug，是设计如此。
常见诱因包括：
- 在多个组件文件里各自 @import "mixins.less"，又各自调用 .flex-center()
- mixin 内部含媒体查询或伪类，被不同上下文多次展开，生成冗余选择器
- 用带条件的 mixin（如 .btn(@size) when (@size = large)）但没加 guard 控制，所有分支都被展开
用 @import (reference) 隔离 mixin 定义
让 mixin 只提供逻辑、不输出任何 CSS，是控制体积的第一道关卡。必须显式写 @import (reference) "mixins/_utils.less";，而不是 @import "mixins/_utils.less"。
注意几个关键点：
- (reference) 仅对当前导入生效；如果 _utils.less 里又写了 @import "base.css"（没加 (reference)），那 base.css 仍会照常输出
- 所有变量和 mixin 定义应集中到一个入口文件（如 core.less），再统一用 @import (reference) "core.less"
- 路径必须完全一致：@import (reference) "./mixins" 和 @import (reference) "../shared/mixins" 被视为两个文件，无法共享作用域
避免 mixin 过度参数化与嵌套调用
把 .button-style(@bg, @color, @border, @hover-bg, @disabled-opa, ...) 这种七八参数的“万能 mixin”拆开，否则编译器无法跳过未用分支，只会全量展开。
更稳妥的做法：
- 拆成语义小单元：.bg-primary()、.text-white()、.rounded-sm()
- 带条件的 mixin 必须配 guard：.shadow-sm() when (@enable-shadow = true) { box-shadow: 0 1px 2px rgba(0,0,0,.1); }
- 嵌套中调用必须用 & 绑定上下文，否则 .card { :hover { .transition(); } } 会输出全局 :hover 规则
- 禁止递归 mixin 无终止条件，比如 .gen(@n) when (@n > 0) { .gen((@n - 1)); }，在 @n > 20 时大概率触发内存溢出
用 extend 替代高频 mixin 调用
当某个样式规则（如 .clearfix、.sr-only）被大量复用时，:extend(.clearfix all) 比反复调用 .clearfix() 更省体积——它让编译器合并选择器，而不是复制声明。
但要注意限制：
- :extend() 跨文件不可见，目标类必须已输出（不能是 @import (reference) 引入的）
- all 关键字必须显式写出，否则只 extend 最近一层匹配
- 检查编译后 CSS：如果看到 .btn, .nav-link, .dropdown-item { clear: both; }，说明 extend 成功；如果只有孤立的 .btn { clear: both; }，就是目标类没被正确引入或路径错位
真正难处理的是 mixin 和 @import 的组合副作用——比如 @import (reference) 了 mixin 文件，但某处误写了 @import "mixins.less"，结果一半规则被引用、一半被展开，这种混用会让体积分析变得极难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
