必须。按钮基础类名与变量抽象必须分离，颜色、尺寸、圆角等应抽成独立变量（如@btn-padding-y、@btn-border-radius），避免写死值；状态逻辑须封装进参数化mixin（如.btn-variant），新增类型应复用而非复制；尺寸单位须用rem保障响应式缩放与比例协调，禁用态需单独封装并全覆盖。
按钮基础类名与变量抽象是否必须分离？
必须。把颜色、尺寸、圆角这些可变因素全抽成变量，否则后续改一个样式就得全局搜索替换。@btn-padding-y、@btn-padding-x、@btn-border-radius 这些变量要独立定义，不和具体类名耦合。比如：
@btn-padding-y: 8px;<br>@btn-padding-x: 16px;<br>@btn-border-radius: 4px;所有按钮都基于这些变量计算内边距和圆角，而不是写死
padding: 8px 16px。否则加个 .btn-lg 时，你得重复写三套 padding 值，还容易漏掉某处。
如何用参数混合（Mixin）生成不同状态的按钮？
别用多个独立的 .btn-primary:hover、.btn-primary:active 手动写——状态逻辑应该封装进 Mixin。定义一个 .btn-variant()，接收背景色、边框色、文字色三个参数，内部自动处理 :hover、:focus、:active 的亮度/对比度调整：
.btn-variant(@bg; @border; @color) {<br> background-color: @bg;<br> border-color: @border;<br> color: @color;<br><br> &:hover {<br> background-color: darken(@bg, 10%);<br> border-color: darken(@border, 12%);<br> }<br><br> &:active {<br> background-color: darken(@bg, 15%);<br> }<br>}调用时只需 .btn-variant(#007bff; #007bff; #fff);，后续新增 .btn-success 只需换参数，不用重写状态逻辑。
扩展新按钮类型时为什么不能直接复制粘贴旧代码？
因为会丢失变量继承链和响应式适配能力。新增 .btn-outline-warning 时，应复用已有 Mixin 和变量，而不是拷贝 .btn-outline-primary 再改颜色：
.btn-outline-warning {<br> .btn-variant(transparent; #ffc107; #ffc107);<br> &:hover {<br> background-color: #ffc107;<br> color: #fff;<br> }<br>}注意这里只覆盖了 hover 行为，其他如 font-size、padding 全部继承自基础 .btn 类——如果当初复制粘贴，就会漏掉 @btn-font-size 这类全局控制项，导致字号不一致。
为什么按钮尺寸类（如 .btn-sm）必须用 rem 或 em 而非 px？
为了响应式缩放和父容器字体变化时能联动。用 @btn-padding-y-sm: 4px 是错的；正确做法是设 @btn-padding-y-sm: 0.25rem，再配合 html { font-size: 16px; } 基准。这样当用户缩放浏览器或系统启用“大文本”模式时，.btn-sm 会同比例放大，而 px 值完全不动。同时，所有尺寸变量统一基于 rem，才能保证 .btn-sm 的 padding、font-size、border-radius 比例协调——否则你会看到小按钮文字挤出边框，或者圆角突然变尖。
真正麻烦的是禁用态（:disabled）的透明度和光标处理，它不参与 Mixin 的颜色计算，必须单独用 .btn-disabled() 封装，且要检查所有主题变体是否都覆盖到了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
