用 Sass Mixin 实现按钮样式复用：将背景色、尺寸等可变参数设为 mixin 参数并带默认值，固化过渡、盒模型等不变逻辑；统一用 &:hover 等嵌套写法避免权重冲突；disabled 状态需同时处理 opacity、pointer-events 和 cursor；颜色通过 CSS 自定义属性解耦，高频变体用 @extend 减少冗余代码。
怎么用 Sass Mixin 实现可复用的按钮样式
直接写死颜色、圆角、阴影的按钮类，改一次要动七八个地方。用 @mixin 把样式逻辑抽出来，才是组件化起点。
核心是把「变」的部分（比如背景色、尺寸、状态）变成参数，「不变」的部分（比如过渡行为、基础盒模型）固化在 mixin 里。
-
@mixin btn($bg: #007bff, $color: #fff, $radius: 4px, $size: 'md')—— 参数带默认值，调用时只传想改的 - 不同尺寸用
$size控制padding和font-size，别硬写.btn-lg这种类名 - 状态样式（
:hover,:disabled）必须在 mixin 内部一并定义，否则外部覆盖容易漏或冲突
为什么 hover 颜色总不生效？检查嵌套顺序和选择器权重
Sass 嵌套里 &:hover 写在后面，不代表它 CSS 权重低；但如果你在外部又写了 .btn:hover，就可能被 mixin 生成的更长选择器（比如 .btn.btn-primary:hover）压住。
- 统一用
&:hover { background-color: darken($bg, 10%) }，避免手写具体色值，保证色调一致 - 禁用
!important—— 它会让后续覆盖（比如主题切换）彻底失控 - 如果项目用了 CSS-in-JS 或 utility-first 框架，mixins 生成的类名可能被 purge 工具误删，需在
safelist里加/^btn-/
disabled 状态样式不能只靠 opacity
单纯设 opacity: 0.6 会让按钮看起来“没加载完”，而且键盘焦点仍可进入，不符合可访问性要求。
- 必须同时加
pointer-events: none和cursor: not-allowed - 用
@if $bg == transparent分支处理镂空按钮，disabled 时补一层浅灰背景，不然文字会看不清 - 别忘了
tabindex="-1"的语义配合 —— mixin 只管样式，但使用时得提醒开发者补 HTML 属性
编译后 CSS 体积暴增？控制 mixin 调用粒度
每个 @include btn(...) 都会复制一遍全部样式代码。10 个按钮变体，CSS 就多出 10 份 hover、focus、disabled 规则。
- 高频变体（如 primary / secondary / danger）用独立 class +
@extend共享基础规则，而非反复@include - 颜色变量统一走 CSS 自定义属性（
--btn-bg），Sass mixin 只负责结构和响应式，运行时换肤交给 JS 控制 - 开发环境保留所有变体，生产构建时用
/* purgecss start ignore */注释圈出必要类，避免误删
最麻烦的其实是设计系统对齐 —— Sass 能管住代码，但管不住设计师临时改个圆角数值后不通知前端。参数命名得带业务语义（比如 $btn-border-radius-sm 而不是 $r1），不然三个月后没人记得 $r2 对应 Figma 哪个组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
