用带参数的 .btn-variant() mixin 统一管理按钮变体，仅封装 @bg、@border、@color 等视觉差异项，设合理默认值，避免嵌套规则与过度组合；禁用态通过 fadeout()、desaturate() 等函数自动推导，不依赖 opacity。
怎么用 Less Mixin 统一管理按钮变体
直接结论：用带参数的 .btn-variant() Mixin，把颜色、边框、背景这些可变部分抽成变量传入，而不是为每个按钮类型写一整套重复样式。
这样做省代码、易维护，改主色调时只要调一个变量，所有按钮自动同步。但很多人一开始会把太多逻辑塞进 Mixin，结果反而难调试。
- 只封装「视觉差异项」：比如
@bg、@border、@color，别把padding或border-radius也塞进去——它们通常是全局一致的 - 给参数设合理默认值，比如
.btn-variant(@bg: #007bff; @border: darken(@bg, 10%); @color: #fff)，避免每次调用都得填满 - 不要在 Mixin 里写
&:hover等嵌套规则——它会让编译后 CSS 选择器层级变深，影响 specificity 和复用性；hover 状态应单独抽成.btn-hover-variant()
为什么不能用 CSS 自定义属性（CSS vars）替代 Less Mixin
因为 Less Mixin 在编译期就完成了计算和展开，生成的是静态 CSS；而 CSS vars 是运行时生效，没法做颜色函数运算（比如 lighten()、fadeout()），也没法条件编译。
典型场景：你想让 .btn-danger 的 hover 背景是 darken(@red, 15%)，这个操作必须在 Less 编译阶段完成。如果用 CSS vars，你只能写死一个值，或者靠 JS 动态算——那就脱离了样式系统的本意。
- Less 的
lighten()、spin()、contrast()等函数无法在 CSS vars 中等效实现 - 构建产物中不会残留变量引用，无运行时开销；CSS vars 则依赖浏览器解析，且无法被 PurgeCSS 安全识别和剔除
- 主题切换若靠 JS 切换 CSS vars，会触发重绘；而多主题 Less 方案（如
theme-dark.less+theme-light.less）可输出独立 CSS 文件，按需加载
常见错误：Mixin 嵌套过深导致编译失败或样式错乱
最典型的翻车点是把按钮尺寸、状态、变体三层 Mixin 套在一起用，比如 .btn(@size, @variant, @state)，看着灵活，实际一加新组合就爆炸。
Less 不支持运行时分支，所有组合必须在编译前穷举。你写了 3 种尺寸 × 4 种变体 × 3 种状态 = 36 种调用？那编译时间、CSS 体积、调试难度全线上升。
- 拆开职责：用
.btn-size()控制padding和font-size，.btn-variant()控制色彩，.btn-state()控制:hover/:disabled—— 各自独立调用 - 避免在 Mixin 内部再调用另一个带参数的 Mixin（比如
.btn-variant()里又调.btn-size()），这会让调用链不可控 - 报错信息像
Recursive call to 'xxx'或生成空白 CSS，基本就是 Mixin 循环引用或参数未定义导致的
如何让按钮变体支持禁用态（:disabled）的自动降级
关键不是硬写 &:disabled，而是复用已有的变体逻辑，用透明度或灰阶函数自动推导出禁用样式。
比如主色是 @primary: #007bff，那么它的禁用背景就可以是 fadeout(@primary, 80%)，文字色用 desaturate(lighten(@primary, 50%), 100%) —— 这些必须在 Less 层算好，不能靠浏览器 runtime 混合。
- 禁用态不建议用
opacity: .6：它会让整个元素（包括子元素）变透明，且无法被屏幕阅读器正确识别为“禁用” - 用
mix()函数更可控，例如mix(#000, @bg, 12%)模拟禁用灰度，比单纯grayscale()更贴近设计规范 - 确保
.btn-variant()的参数能透传到.btn-disabled-variant()，否则禁用样式容易和正常态脱节
真正麻烦的是设计系统里那些“半禁用”状态（比如权限不足但可 hover 查看提示），这种没法靠一套 Mixin 覆盖，得单独约定 class 名和配套 JS 行为。Mixins 只负责明确、静态、可枚举的样式分支。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
