必须用参数化 mixin 管理按钮：尺寸用语义化 map + guard 判断的 .button-size()，颜色变体显式分离 @bg/@border/@text，状态样式正交封装为 .button-state()，主题变量须在组件前导入以确保上下文一致。
必须用参数化 Mixin，不能靠 class 堆砌；否则改个圆角要手动同步 20 处，主题切换直接失效。
按钮尺寸怎么用 map + 循环统一管理
硬写 .btn-small、.btn-medium、.btn-large 是反模式。尺寸本质是 height、padding、font-size 三者的联动组合，应抽成语义化 map：
.button-sizes: {
small: (h: 24px, p: 0 8px, fs: 12px),
medium: (h: 32px, p: 0 12px, fs: 14px),
large: (h: 40px, p: 0 16px, fs: 16px)
};
再配一个通用尺寸 mixin：
.button-size(@size) when (ismap(@button-sizes[@size])) {
@conf: @button-sizes[@size];
height: extract(@conf, h);
padding: extract(@conf, p);
font-size: extract(@conf, fs);
}
- 调用时只写
.button-size(medium)，不暴露具体数值，换设计规范只需改 map 一项 - 用
ismap()做类型兜底，防止传错 key 导致编译失败 - 别把尺寸逻辑塞进
.btn()主 mixin 里——它该只管“是否启用”，尺寸/颜色/状态必须正交拆开
颜色变体为什么不能只传 @color 一个参数
幽灵按钮（background: transparent）和实色按钮共享同一套文本色逻辑，但若只传 @color，就无法区分背景与文字色。正确做法是显式分离：
-
@bg：控制background-color，幽灵按钮传transparent -
@border：独立控制边框，支持none或具体色值 -
@text：强制指定文字色，不依赖contrast()自动推导（易在暗色模式下翻车） - 禁用态不用
opacity: 0.5，而用desaturate(@bg, 50%)+fadeout(@text, 30%)保持可访问性
错误示例：.btn-variant(#3b82f6) → 无法生成幽灵按钮；正确调用：.btn-variant(@bg: #3b82f6, @text: white) 或 .btn-variant(@bg: transparent, @text: #3b82f6)。
状态样式（hover/active/disabled）怎么避免重复展开
Less 每次调用 Mixin 都会完整输出 CSS，如果把 :hover 写死在主 mixin 里，每个按钮实例都会复制一遍伪类规则，体积暴涨。应改为 guard 判断 + 单独封装：
.button-state(@state) when (@state = hover) {
&:hover { background: darken(@bg, 10%); border-color: darken(@border, 15%); }
}
.button-state(@state) when (@state = active) {
&:active { opacity: 0.85; transform: translateY(1px); }
}
.button-state(@state) when (@state = disabled) {
& when (iscolor(@bg)) {
background: desaturate(@bg, 50%);
}
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
}
- 调用链清晰：
.button-base(); .button-size(medium); .button-state(hover); - 禁用态额外加
pointer-events: none和cursor: not-allowed，光靠opacity不满足 WCAG 键盘可访问要求 - 别在
.button-state()里嵌套另一个 mixin——调试时根本分不清哪层在改border-color
@import 顺序错会导致主题变量完全失效
Less 变量作用域是“最后定义生效”，但 Mixin 引用变量是在**调用时**取值，不是定义时。典型翻车：
@import "components/button.less"; // 里面用了 @primary-color @import "themes/dark.less"; // 这里才定义 @primary-color: #1e293b;
结果按钮还是亮色——因为 .button() 编译时 @primary-color 还没被覆盖。
- 所有主题变量文件（
themes/*.less）必须放在所有组件 mixin 文件之前 - 验证方法：在 mixin 里加
// debug: @primary-color，看编译后注释是否是你期望的值 -
!important对 Less 变量无效，别试；也别用javascriptEnabled: true，现代构建工具已禁用且不安全
真正难搞的不是写多少 mixin，而是确保每次调用时，@bg、@text、@border 这三个参数始终来自同一份主题上下文——漏掉一个，按钮就可能在暗色模式下变成不可读的灰底灰字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
