最稳路径是用$button-variants Map配合@each循环及lighten()/darken()生成按钮样式；key须为带引号字符串，value须为list或嵌套map，状态伪类须置于循环内，尺寸与色彩逻辑应分离管理。
直接用 $button-variants Map + @each 循环 + lighten()/darken() 是最稳的路径，别手写一堆 .btn-primary、.btn-success 类——Map 一改全更新，颜色偏移也自动跟着变。
怎么定义 $button-variants 才不崩？
Map 的 key 必须是带引号字符串，value 必须是 list 或嵌套 map，否则 map-get() 会返回 null，编译直接报错 Argument '$map' of map-get() must be a map。
$button-variants: ("primary": (#007bff, #fff), "success": (#28a745, #fff), "danger": (#dc3545, #fff));- 别写成
primary: (...)（无引号会被当变量）或PRIMARY: (...)（大小写敏感） - 如果要加边框、圆角等额外参数，改用嵌套 map：
"primary": ("bg": #007bff, "text": #fff, "border": 2px)，再用map-get($props, "bg") - 取值前加守卫：
@if map-has-key($props, "bg") { background-color: map-get($props, "bg"); }
hover 和 disabled 样式为什么总套错色？
因为 &:hover 写在 @each 外面时，$type 和 $props 已失效，所有按钮 hover 都用同一个颜色计算逻辑。必须把状态伪类塞进循环体内，和基础样式共用当前上下文。
- 正确写法：
@each $type, $props in $button-variants { .btn-#{$type} { background-color: nth($props, 1); color: nth($props, 2); &:hover { background-color: darken(nth($props, 1), 10%); color: nth($props, 2); } &:disabled { opacity: 0.6; cursor: not-allowed; } } } - 别用
lighten($color, 20%)对深色背景（如#333），容易变灰白不可读；对深色优先用darken()，浅色再用lighten() - 如果需要更精细控制（比如 success 按钮 hover 要变绿但不发荧光），可为每个变体单独设偏移量：
"success": (#28a745, #fff, 8%)，然后darken(nth($props, 1), nth($props, 3))
尺寸和色彩能联动生成吗？
可以，但别强行揉进一个 Map。尺寸逻辑（$btn-sizes）和色彩逻辑（$button-variants）应分离管理，用嵌套循环组合，避免键名冲突和维护混乱。
立即学习“前端免费学习笔记（深入）”；
- 先定义尺寸：
$btn-sizes: ("sm": (padding: 0.25rem 0.5rem, font-size: 0.875rem), "lg": (padding: 0.5rem 1rem, font-size: 1.25rem)); - 再双层循环：
@each $type, $props in $button-variants { @each $size, $sprops in $btn-sizes { .btn-#{$type}-#{$size} { @include btn-base; @include btn-size($sprops); background-color: nth($props, 1); &:hover { background-color: darken(nth($props, 1), 10%); } } } } - 这样生成的是
.btn-primary-sm、.btn-danger-lg等明确语义类，而不是靠 CSS 优先级叠出的意外效果 - 注意：
@include btn-size()里只处理 padding/font-size/line-height，别重复写transition或cursor——这些该由btn-base一次性固化
真正容易被忽略的不是语法，而是 Map 数据结构的一致性：key 类型、嵌套层级、单位统一（全用 rem、全用 %、别混 px 和 em）。一旦某条数据格式跑偏，整个循环就静默失效——@debug 多打两行，比翻三遍文档快。
