应使用 $btn-sizes map 统一管理按钮尺寸配置，通过 @each 循环生成 .btn-sm/.btn-lg 等语义类名并复用 @mixin btn-base 基础样式，避免硬编码、重复书写和结构不一致问题。
用 $btn-sizes Map 定义尺寸配置，别硬写 btn-lg/btn-sm 类名
直接在 SCSS 里写一堆固定类名（比如 .btn-lg、.btn-md）会导致尺寸逻辑散落、改一个值要搜三处。正确做法是先定义一个 Map 存尺寸参数，再统一循环生成类名和样式。
常见错误：把尺寸写死在 mixin 参数里，比如 @mixin btn($size: 'md')，结果每次加新尺寸就得改所有调用点。
-
$btn-sizes必须是 map，键为语义名（如'sm'、'lg'），值为包含padding和font-size的子 map - Map 值里不要只写像素值，优先用
rem或带计算的表达式（如0.375rem 0.75rem），方便后续缩放 - 循环必须用
@each $name, $props in $btn-sizes，不能用@for，否则丢失语义映射关系
循环生成类名时，&.btn-#{$name} 要配合 @include btn-base 复用基础样式
只靠循环生成类名还不够——每个尺寸变体仍需继承按钮共性逻辑（过渡、边框、光标等）。如果在循环里重复写这些，等于又回到“复制粘贴”状态。
典型翻车现场：循环里直接写 padding: map-get($props, padding)，但漏了 transition 或 vertical-align，导致小按钮在行内布局中对不齐。
- 基础样式必须抽成独立
@mixin btn-base，里面固化display、cursor、transition、user-select等不变项 - 尺寸循环内部只负责覆盖可变量：
padding、font-size、line-height（如有） - 务必用
&.btn-#{$name}写法，避免生成冗余选择器（如.btn .btn-sm）
map-get($props, font-size) 取值失败？检查 Map 结构是否嵌套过深或 key 拼写错误
编译报错 Argument '$map' of map-get() must be a map 或返回 null，90% 是 Map 格式不对。Sass 对 map 的 key 匹配严格区分大小写和引号类型。
例如 map-get($props, 'font-size') 查不到，可能因为原始 Map 里 key 是 font-size（无引号）或 fontSize（驼峰）。
- 定义 Map 时统一用带引号字符串作 key：
'font-size': 0.875rem，别混用font-size（无引号会被当变量） - 取值前加守卫判断：
@if map-has-key($props, 'font-size')，避免空值崩掉整个循环 - 调试用
@debug $props打印结构，比猜快十倍
响应式尺寸切换要用 @media 套 Map 循环，不是给每个类加 @media
想让按钮在移动端自动变小？别在每个 .btn-sm 后面补一段 @media (max-width: 768px) { ... } —— 这样维护成本爆炸，且无法复用断点逻辑。
真实项目里，断点常和尺寸语义绑定（比如 'sm' 在手机上对应 'xs'），硬编码会卡死扩展性。
- 把断点也做成 Map：
$btn-responsive-sizes: ('sm': ('mobile': 'xs', 'desktop': 'sm')) - 外层用
@each $breakpoint, $size-map in $grid-breakpoints控制媒体查询，内层再循环$size-map - 最终生成的 CSS 是
@media (max-width: 576px) { .btn-sm { ... } }，而不是一堆分散的媒体查询块
'padding'，整个循环就可能静默失效。建议在项目根目录建 _button.config.scss，把所有 Map 定义和校验逻辑收拢在那里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
