按钮样式必须用参数化混合器而非普通class，因其能通过统一参数组合生成主色、次色等6种变体，避免硬写20+类导致维护成本激增；less的.btn()混合器通过可配置参数（如@bg、@border）和默认值保障可维护性，并支持css变量实现运行时主题切换。
按钮样式为什么必须用参数化混合器而不是普通class
因为按钮的视觉变体（主色、次色、幽灵、禁用、尺寸）本质是同一套逻辑在不同参数下的输出，硬写多个class会导致维护成本指数级上升——比如改一次圆角，要同步改20个类；而混合器只改一处参数就能全局生效。
Less的.btn()混合器不是锦上添花，是避免样式失控的底线。它把颜色、边框、背景、文字、过渡等耦合属性拆成可独立配置的参数，让每个按钮变体变成一次调用，而非一次复制粘贴。
-
@bg、@border、@text必须分开传，不能合并为@color——否则幽灵按钮（background: transparent）无法正确继承文本色 - 所有参数都要设默认值，例如
@padding-y: 8px，否则调用时漏传会编译失败 - 禁用态不能只靠
opacity，必须叠加pointer-events: none和cursor: not-allowed，否则键盘用户仍可聚焦
如何用一个混合器覆盖6种标准按钮类型
主流UI库的按钮类型其实就六种：主按钮、次按钮、幽灵按钮、文本按钮、危险按钮、禁用按钮。它们不是6套独立样式，而是.btn()在不同参数组合下的实例。
示例定义：
.btn(@bg: #007bff; @border: #007bff; @text: #fff; @hover-bg: darken(@bg, 10%); @hover-border: darken(@border, 10%); @padding-y: 8px; @padding-x: 16px; @radius: 4px; @disabled: false) {
display: inline-flex;
align-items: center;
justify-content: center;
padding: @padding-y @padding-x;
border: 1px solid @border;
background-color: @bg;
color: @text;
border-radius: @radius;
font-size: 14px;
line-height: 1.5;
cursor: pointer;
transition: all 0.2s ease;
&:hover:not(:disabled) {
background-color: @hover-bg;
border-color: @hover-border;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px fade(@bg, 20%);
}
&:disabled {
background-color: #e9ecef;
border-color: #dee2e6;
color: #6c757d;
cursor: not-allowed;
pointer-events: none;
}
}
- 主按钮：
.btn(#007bff) - 幽灵按钮：
.btn(transparent; #007bff; #007bff)（注意@bg为transparent，@text需显式传） - 危险按钮：
.btn(#dc3545; #dc3545; #fff) - 禁用按钮：直接在HTML加
disabled属性，混合器内部已处理
尺寸与图标适配的关键细节
按钮尺寸（sm / md / lg）和图标支持不是靠额外class堆砌，而是通过扩展混合器参数实现。强行用.btn-sm这种class会破坏参数化体系，导致尺寸和圆角、内边距、字体大小脱节。
- 尺寸应由
@size参数驱动：.btn(...; @size: sm)→ 内部用if判断切换@padding-y、@padding-x、@font-size - 图标按钮必须预留
gap空间：gap: 6px比margin-right更可靠，避免图标换行或错位 - 小尺寸按钮（
sm）的border-radius建议设为2px，而非沿用4px——视觉上更协调 - 加载中状态不能只加文字，要用
::before伪元素插SVG，避免重排，且visibility: hidden控制显示
导出CSS变量以支持运行时主题切换
纯Less混合器只能编译期定制，但业务常需运行时切主题（如深色模式）。解决方案是把核心色值抽成CSS变量，再让混合器引用这些变量。
先在:root定义：
:root {
--btn-primary-bg: #007bff;
--btn-primary-border: #007bff;
--btn-primary-text: #fff;
--btn-ghost-bg: transparent;
--btn-ghost-text: #007bff;
}
然后混合器里用@{...}语法注入：
.btn-primary() {
.btn(
@bg: var(--btn-primary-bg),
@border: var(--btn-primary-border),
@text: var(--btn-primary-text)
);
}
- 不要在混合器参数里直接写
var(--x)，Less不识别，必须用@{}包裹 - CSS变量名要带命名空间（如
--btn-primary-bg），避免和全局变量冲突 - 深色模式下只需覆盖
:root里的变量值，所有按钮自动响应，无需重新编译Less
真正难的不是写出混合器，而是守住「所有按钮变体必须能被同一组参数描述」这个约束。一旦有人绕过混合器直接写.btn-danger-sm这种class，整套体系就从参数化退化成手工拼贴了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
