必须用map代替多个独立参数——因顺序敏感、漏传无提示、新增配置需全局修改；键名须引号字符串，嵌套map支持复杂值，断点逻辑应封装在mixin内，子mixin只收原子参数。
直接用 Map 代替多个独立参数，是解决 @mixin 参数膨胀最干净的方式——不是“能用”，而是“必须用”。
为什么传 5 个参数的 @mixin btn($size, $variant, $rounded, $disabled, $fullwidth) 很危险
这类签名看似清晰，实则埋了三颗雷：调用时顺序不能错、漏传参数没提示、加新配置就得改所有调用点和文档。更麻烦的是，当 $variant 和 $size 各自需要配套逻辑（比如 sm 按钮在 danger 主题下 padding 要微调），硬拆参数根本没法表达这种组合关系。
常见错误现象：
- 编译不报错，但按钮在 lg + outline 组合下圆角消失（因为 $rounded 被 $variant 的样式覆盖）
- 新增 $icon-only 参数后，旧项目里所有 @include btn(...) 都得补上默认值，否则编译失败
实操建议：
- 把所有可变项收进一个 Map，键名语义化："size": "lg"、"variant": "outline"、"rounded": true
- 在 mixin 内部用 map-get($config, "size", "md") 取值，第三个参数设默认值，避免空值崩掉整个编译
- 不要写 @if map-has-key($config, "rounded") and map-get($config, "rounded") == true，直接 @if map-get($config, "rounded") 更安全（Sass 会把 null 和 false 当作 falsy）
Map 参数结构怎么设计才不翻车
键名必须用带引号字符串，比如 "padding"，别用 padding（会被当变量）、Padding（大小写敏感）、padding-x（连字符在 key 里合法，但取值时必须严格匹配）。
典型错误：
- 定义时写 $btn-config: (size: "lg", variant: "primary") → 编译报错 Argument '$map' of map-get() must be a map
- 取值时写 map-get($config, size) → 返回 null，因为 key 是字符串 "size"，不是变量 size
实操建议：
- 初始化就用标准 Map：$btn-config: ("size": "lg", "variant": "primary", "padding": "0.5rem 1rem")
- 复杂值用嵌套 Map："variant": ("bg": #007bff, "text": #fff, "border": 2px)，再用 map-get(map-get($config, "variant"), "bg") 逐层取
- 调试时加一行 @debug $config，比猜结构快十倍
如何让 Map 参数支持响应式断点切换
别在每个 @include btn(...) 调用处套 @media，那等于把维护成本从一处放大到 N 处。正确做法是把断点逻辑封装进 mixin 内部，用 $breakpoints Map 驱动。
实操建议：
- 定义断点 Map：$breakpoints: ("sm": 576px, "md": 768px, "lg": 1024px)
- 在 mixin 里接收 "responsive-sizes": ("sm": "xs", "md": "sm", "lg": "md") 这样的配置
- 循环 @each $bp, $size in map-get($config, "responsive-sizes", ())，生成对应媒体查询块
- 注意：map-get(..., (), ()) 第二个参数必须是空 Map ()，不是 null，否则 @each 会报错
Map 参数和 @include 嵌套调用怎么配合才不混乱
当一个按钮 mixin 依赖另一个基础样式 mixin（比如 @include btn-base()），别把 Map 参数一层层透传下去。那样会让调用链变成 @include btn($config) → @include btn-base($config) → @include transition($config)，完全失去封装意义。
实操建议：
- btn-base 只接受原子参数：@include btn-base($bg, $text, $border)
- 主 btn mixin 负责解析 Map 并提取所需字段，再分发给子 mixin：@include btn-base(map-get($config, "bg"), map-get($config, "text"))
- 所有状态伪类（&:hover、&:focus）必须写在主 mixin 的循环体内，否则拿不到当前 $config 上下文
- 如果子 mixin 也要响应式，让它自己读 $breakpoints 全局变量，而不是靠父级传 Map
真正难的不是语法，而是决定哪些配置该放进 Map、哪些该保持原子参数。比如 $important 这种布尔开关，单独传比塞进 Map 更直观；而所有跟“视觉表现”强相关的配置（尺寸、颜色、圆角、间距），一律走 Map。这个边界一旦模糊，Map 就会从解药变成新包袱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
