真正可复用的less参数化mixin需满足：参数覆盖所有视觉变量并设设计系统基线默认值；语义化命名；避免嵌套；用isnumber()/default()兜底；尺寸与状态正交拆分；主题变量必须@import在组件前；优先组合原子类而非重复展开样式。
Less参数化Mixin怎么写才真正可复用
直接给结论：参数必须覆盖所有视觉变量（颜色、尺寸、圆角、间距、字体），且默认值要符合设计系统基线，不能写死具体数值。否则换个主题就全得重写。
常见错误是把 border-radius 写成固定 4px，结果暗色模式里按钮需要 8px 就只能另起一个Mixin——这根本不是参数化，只是换了个名字的复制粘贴。
- 每个参数都该有语义名，比如用
@border-radius-base而不是@radius - 避免嵌套过深，Mixin里别再调另一个带复杂逻辑的Mixin，否则调试时根本分不清哪层在改
padding - 用
isnumber()或default()做兜底判断，防止传入空值导致编译失败
如何用同一个Button Mixin输出不同尺寸+状态样式
关键不是堆砌参数，而是把尺寸和状态拆成正交维度：尺寸控制 height、padding、font-size 三者联动；状态（hover/active/disabled）只管 background、border-color、opacity —— 这样才能自由组合。
错误做法是为每种尺寸+状态写一个独立Mixin，比如 .btn-large-hover()，实际项目里光按钮变体就可能爆炸到20+个。
- 尺寸用 map 管理：
@button-sizes: { small: (h: 24px, p: 0 8px, fs: 12px), medium: (h: 32px, p: 0 12px, fs: 14px) } - 状态用 guard 判断：
.button-state(@state) when (@state = hover) { background: darken(@bg, 10%); } - 调用时链式传递：
.button-base(); .button-size(medium); .button-state(hover);
为什么@import顺序一错，主题变量就失效
Less变量作用域是“最后定义生效”，但Mixin引用时取的是调用时的变量值，不是定义时的。所以如果 @primary-color 在Mixin之后才被覆盖，组件依然用旧值。
典型翻车场景：主文件先 @import "components/button.less"，再 @import "themes/dark.less"，结果按钮还是亮色——因为Mixin编译时 @primary-color 还没被重写。
- 所有主题变量文件必须放在所有组件Mixin之前
@import - 用
!important强制覆盖不靠谱，Less里它只对CSS生效，对变量无效 - 验证方式：在Mixin里加
// debug: @primary-color，看编译后注释是否是你期望的值
编译后CSS体积暴增？Mixin重复展开是主因
Less不会自动去重，每次调用Mixin都会生成一份完整CSS。一个按钮Mixin被调10次，padding相关声明就重复10遍，gzip也救不了。
这不是语法问题，是组织方式问题。真正可定制的组件库，应该把公共样式抽成基础类（如 .u-padding-sm），Mixin只负责组合这些原子类 + 动态变量。
- 禁用含大量声明的“全能Mixin”，比如一个同时写
display、flex、justify-content的布局Mixin - 用
.button() { .u-flex-center(); .u-text-truncate(); }这种组合式写法，复用原子类 - 开启Less编译器的
--strict-mixins选项，能提前报出未定义参数的调用
最麻烦的其实是设计系统和前端之间的变量命名对齐——设计师说“主色”，开发写了 @primary，运营提需求要加“强调色”，结果发现 @accent 和 @highlight 在两份文档里指的是一回事。这种隐性不一致，比语法错误更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
