less mixin 导致 css 冗余的根本原因是其静态文本替换机制，每次调用都原样复制全部样式，不合并、不 dedupe；:extend() 和 @import (reference) 可优化，但需严格遵循规则。
Less 中的 mixin 导致 CSS 冗余，根本原因不是写法错，而是它压根就不是“复用”，而是“复制”——每次调用都原样展开全部内容，编译器不合并、不 dedupe、不判断是否已存在。
为什么 .mixin() 调用一次就多一份 CSS？
Less 的 mixin 是静态文本替换机制，不是运行时函数。定义 .btn-base() 后，在 8 个组件里各调用一次 .btn-base();，最终 CSS 就有 8 套完全相同的 padding、border、transition 声明。
- 这不是 bug，是设计如此：编译器只做字符串粘贴，不分析语义
- 带媒体查询的 mixin（如
.responsive-padding()）更危险：每个调用点都会生成独立的@media块，PostCSS 也救不了——它只合并顶层@media，而 Less 嵌套出的@media是嵌套在选择器里的 - 无括号定义（如
.clearfix { ... }）会被当普通 class 输出空规则，污染 DevTools 且无法被@import (reference)抑制
@import (reference) 必须用对，否则白搭
@import (reference) 是抑制 mixin 定义本身输出 CSS 的唯一方式，但极易误用。
- 路径必须完全一致：
@import (reference) "mixins/utils"和@import (reference) "./mixins/utils"被视为两个文件，作用域不共享 - 它只影响当前导入行；如果
utils.less里又写了@import "reset.css"（没加(reference)），那reset.css仍会照常输出 - 所有变量和 mixin 应集中到单个入口文件（如
core.less），再统一@import (reference) "core.less"，避免分散管理
用 :extend() 替代高频静态复用
当样式块固定、无需参数、被大量引用时，:extend() 比 .mixin() 省体积一个数量级。
- 5 个按钮类都写
&:extend(.btn-base all)，编译后是.btn-base, .btn-primary, .btn-secondary { ... }单行规则 -
:extend()跨文件不可见，目标类（如.btn-base）必须已实际输出（不能是@import (reference)引入的） - 必须显式写
all，否则只 extend 最近一层匹配；伪类（如:hover）不支持 extend
拆分 mixin + guard 控制展开分支
别让一个 mixin 承担太多逻辑。过度参数化（如 .button-style(@bg, @color, @border, @hover-bg, @disabled-opa)）会让编译器无法跳过未用分支，只能全量展开。
- 拆成语义小单元：
.bg-primary()、.text-sm()、.rounded-md() - 带条件的 mixin 必须配 guard：
.shadow-sm() when (@enable-shadow = true) { box-shadow: 0 1px 2px rgba(0,0,0,.1); } - 嵌套中调用必须用
&绑定上下文，否则.card { :hover { .transition(); } }会输出全局:hover规则
最常被忽略的一点：冗余往往不是来自 mixin 本身，而是导入链失控——多个组件各自 @import "mixins.less"，又各自调用 .flex-center()，结果同一段逻辑被展开十几次。查 dist/css/app.css 里有没有重复的 .flex-center 或 @media (min-width: 768px)，比看源码更快定位问题根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
