应使用@mixin封装按钮样式，将尺寸（$size）与颜色（$bg、$color）分离传参，通过语义化键值从尺寸Map中动态获取padding、font-size等，颜色变体用带引号字符串的Map配合@each生成，状态伪类嵌入循环内，禁用em单位，全部尺寸属性在.btn--sm等BEM修饰符中显式声明，并用CSS自定义属性解耦运行时可变项。
用 @mixin 封装按钮基础样式，尺寸和颜色必须分离传参
直接写死 .btn-lg、.btn-primary 类，改一个颜色要翻三处、调一次尺寸得同步改五条属性。真正可维护的做法是把「变」的抽成参数，「不变」的固化在 mixin 里。@mixin btn 至少接受 $bg、$color、$size 三个参数，其中 $size 不是字符串标签，而是控制 padding、font-size、border-radius 的计算依据。
常见错误是把尺寸逻辑硬塞进颜色 Map 里，比如 "primary-sm": (#007bff, #fff)——这会让尺寸和语义耦合，后续加 xl 档位就得爆炸式新增 key。正确做法是定义独立的尺寸配置：$btn-sizes: ("sm": (pad-y: 0.375rem, pad-x: 0.75rem, fs: 0.875rem), "lg": (pad-y: 0.75rem, pad-x: 1.5rem, fs: 1.25rem))，再用双层循环组合。
-
$size参数值应为"sm"、"md"这类语义键，不是像素值，便于后期统一缩放 - padding 必须用
calc()或map-get()动态取值，禁用固定em单位（否则嵌套时会被父级 font-size 放大） - border-radius 要随尺寸同比例收敛，
"sm"对应0.25rem，"lg"对应0.5rem，不能全写4px
颜色变体用 $button-variants Map + @each，key 必须带引号
手写 .btn-primary:hover、.btn-success:hover 是反模式。用 Map 存颜色配置，@each 自动展开，改一个色值全链路更新。但 Map 的 key 必须是带引号字符串，比如 "primary": (#007bff, #fff)，写成 primary: () 会被 SCSS 当作变量名，编译直接报错 Argument '$map' of map-get() must be a map。
状态伪类（:hover、:disabled）必须写在 @each 循环体内，否则所有按钮 hover 都复用同一套计算逻辑。深色背景别盲目用 lighten()，#333 加 lighten($color, 20%) 容易变灰白不可读；优先对深色用 darken()，浅色再用 lighten()。
- 每个变体的 hover 偏移量可单独设，如
"success": (#28a745, #fff, 8%)，然后darken(nth($props, 1), nth($props, 3)) - 如果要用边框或阴影等额外属性，value 改用嵌套 map：
"primary": ("bg": #007bff, "border": 2px solid #0056b3)，取值前加@if map-has-key($props, "border")守卫 - 别在 Map 里混入尺寸参数，尺寸和色彩逻辑必须物理隔离，否则 Map 键名冲突、调试时根本分不清哪条是 size 哪条是 color
尺寸修饰符用 BEM 单类名，.btn--sm 必须显式声明全部尺寸属性
很多人以为给 .btn 加个 font-size: 0.875rem 就是小号按钮，结果 padding 还是 0.5em 1em，文字被挤到边缘。BEM 修饰符 .btn--sm 是完整视觉契约，不是微调——它必须显式覆盖 font-size、padding、min-height、line-height、border-radius 全部五项。
禁用 em 单位，全部用 rem 或 px，否则按钮放进 font-size: 0.8em 的卡片里会二次缩小。也别把 --sm 加在 .btn-group 上，那只是布局容器，加修饰符会催生 .btn-group--sm .btn 这种层级选择器，一挪结构就失效。
-
.btn--sm的min-height必须是calc(1.5rem + 2px)（含 border），保证点击热区达标 - 响应式适配和语义尺寸要分开：媒体查询覆盖写在外部，不在
.btn--sm里塞@media，否则语义污染 - 多个修饰符连用时 class 顺序推荐固定为
btn btn--primary btn--sm btn--disabled，避免协作时漏加或定位困难
用 CSS 自定义属性解耦高频变更项，比如主题色和禁用态透明度
如果产品需要支持亮/暗主题切换，或者禁用态透明度后期要从 0.6 改成 0.4，硬编码在 SCSS 里就得全局搜索替换。更稳的方式是把这类高频变量抽成 CSS 自定义属性，在 :root 中定义，SCSS 只负责生成初始值。
例如：:root { --btn-disabled-opacity: 0.4; --btn-theme-bg: #007bff; }，然后在 mixin 里用 opacity: var(--btn-disabled-opacity)。这样 JS 运行时也能动态改，比如夜间模式一键切主题色，不用重编译 SCSS。
- 自定义属性适合控制「运行时可能变化」的值，SCSS 变量适合控制「构建时确定」的值（如断点阈值、基础圆角）
- 不要用自定义属性替代所有 SCSS 变量，比如
border-radius: var(--btn-radius-sm)在低版本 iOS Safari 里不生效，得 fallback 到 SCSS 编译后的值 - hover 颜色如果用
color: var(--btn-hover-color)，记得在 :root 里同时定义亮/暗两套值，并用@media (prefers-color-scheme: dark)切换
真正容易被忽略的是：尺寸修饰符永远不该碰 margin 和 display。一个 .btn--sm 只负责自己“小”，不负责“离上面那个按钮多远”——那是工具类或父容器的职责。混淆这两层，组件就会越用越重，最后谁都改不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
