带默认参数的mixin能减体积，因其提升复用意愿、避免为微小差异新建规则；应只封装视觉差异项、用函数推导禁用态、禁用嵌套:hover、用类型判断替代default()、引入reference防重复展开、优先extend高频原子样式。
带默认参数的Mixin为什么能减体积
因为默认参数让调用更轻量，避免为“几乎不变”的值反复传参，从而减少 mixin 调用频次和编译时重复展开。关键不是参数本身，而是它让开发者更愿意复用同一个 mixin，而不是为微小差异另写一个新规则——后者才是体积膨胀的主因。
.btn-variant(@bg, @border, @color) 这类写法要不得
常见错误是把所有按钮样式都塞进一个 mixin，参数一多就难记、难维护，调用时又容易漏传，导致编译器用默认值或 fallback 值硬补，最终生成一堆语义不清、难以 purge 的 CSS 块。
- 只封装「视觉差异项」：
@bg、@border、@color这类真正会变的值；固定值如@padding、@border-radius应抽成独立 mixin 或变量 - 默认值必须符合设计系统基线：
.btn-variant(@bg: @primary-color; @border: darken(@bg, 10%); @color: #fff)，而不是#007bff这种魔法值 - 禁用态不靠
opacity，而用函数推导：@disabled-bg: desaturate(fadeout(@bg, 40%), 20%)，避免运行时 JS 补偿 - 别在 mixin 里嵌套
&:hover—— 它会让输出选择器变成.btn-primary:hover，无法被.btn:hover统一覆盖，被迫生成更多规则
参数兜底比硬写 default() 更可靠
Less 的 default() 函数在条件分支中易出错，且编译器不总能静态判定是否“未传参”。更稳的方式是用类型判断 + 显式 fallback。
- 用
isnumber()检查尺寸类参数：when (isnumber(@size))，防止传入lg字符串却误当数值计算 - 颜色参数优先用
iscolor()：when (iscolor(@bg))，避免@bg: null导致darken(null, 10%)静默失败 - 字符串参数用
isstring()+extract()做映射：@spacing: extract(@spacings, index(@spacings, @size))，比一堆when (@size = lg)分支更易维护
编译后体积没降？先检查 mixin 是否被多次展开
Less 不做运行时去重，同一个 mixin 被调用 N 次，就生成 N 份相同 CSS。哪怕参数完全一样，也不会自动合并。
- 用
@import (reference)引入 mixin 文件，确保定义只存在一份，不输出任何 CSS - 避免在循环或条件块里调用 mixin（Less 不支持运行时逻辑，所谓“循环”只是 AST 展开，极易爆炸）
- 检查编译后 CSS：如果看到
.btn-primary { ... } .btn-secondary { ... }是分开的块，说明 mixin 没被 extend 或组合复用；理想状态是.btn-primary, .btn-secondary { ... }合并输出 - 高频原子样式（如
.text-center、.d-flex）应改用:extend()，而非 mixin 调用——前者合并选择器，后者复制声明
@primary-color 在 mixins/buttons.less 之后才定义，所有默认值都会回退到初始值，最后生成的 CSS 就是错的。这问题不会报错，只会静默产出错误样式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
