SCSS不支持真正的参数解构，需用$ args... + meta.keywords()手动提取关键词参数并map-get读取；必须@use "sass:meta"，调用须全关键词传参，不可混用位置参数。
SCSS里没有真正的“参数解构”，只有@include传参时的关键词语法和meta.keywords()手动提取
SCSS 本身不支持像 JavaScript 那样的对象解构（如 { size, color } = args），所谓“任意参数解构”其实是用可变参数 $args... 接收所有传入值，再靠 meta.keywords($args) 把关键词参数转成 map 来读取。这不是语法糖，是手动模拟——漏掉 @use "sass:meta" 或传错参数类型（比如位置参数混进关键词参数），meta.keywords() 就返回空 map 或报错。
常见错误现象：@include triangle($direction: "up", $size: 8px) 编译失败；或 meta.keywords($args) 返回 ()，后续 map-get() 拿不到值。原因基本就两个：没加 ... 后缀声明可变参数，或调用时用了位置传参而非关键词传参。
- 必须写
@mixin foo($args...)，不能只写@mixin foo($args) - 调用时必须用
@include foo($key1: val1, $key2: val2)，不能写@include foo(val1, val2) - 必须提前
@use "sass:meta"，否则meta.keywords()不可用
用meta.keywords() + map-get() 安全读取关键词参数
拿到关键词参数 map 后，不能直接展开属性，得一个个 map-get() 提取，并设好默认值。SCSS 的 map 是静态结构，不存在“解构赋值”动作，所有字段都得显式查。
典型误用：$config: meta.keywords($args); $size: $config.size; —— 这会报错，因为 SCSS map 不支持点号访问。
- 正确写法：
$size: map-get($config, "size") or 6px; - 方向参数建议用字符串枚举：
map-get($config, "direction") == "up"，别用布尔或数字，避免 IDE 无法提示 - 颜色参数强烈建议 fallback 到
currentColor：map-get($config, "color") or currentColor - 若某参数必填但未传，可用
@warn "Missing required parameter: #{"direction"}"提前报错
为什么不用位置参数+默认值？它比关键词更脆弱
位置参数看似简单，但一旦混合宏参数超过 3 个，调用时极易传错顺序，且无法跳过中间默认参数。比如 @mixin triangle($direction, $size, $color, $offset)，想只改 $offset 就得重复写前三个值。
关键词参数则天然支持“按需覆盖”，语义清晰、IDE 可补全、重构安全。但代价是：你必须接受它不支持“剩余参数解构”，每个字段仍要手写 map-get()。
- 位置参数适合固定、少于 3 个且顺序稳定的场景（如
@mixin pad($all)） - 关键词参数适合配置类混合宏（如背景、三角形、阴影、栅格），哪怕只有 2 个参数也推荐用
- 不要混用：同一混合宏内既收位置参数又收
$args...，编译器行为不可控
真实可用的高阶三角形混合宏示例
下面这个 @mixin triangle() 支持关键词传参、必填校验、方位偏移控制，且能直接用于伪元素：
@use "sass:meta";
@mixin triangle($args...) {
$config: meta.keywords($args);
$direction: map-get($config, "direction");
$size: map-get($config, "size") or 6px;
$color: map-get($config, "color") or currentColor;
$offset: map-get($config, "offset") or 0;
@if not index(("up", "down", "left", "right"), $direction) {
@error "Invalid direction: #{$direction}. Use 'up', 'down', 'left', or 'right'.";
}
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
@if $direction == "up" {
border-width: 0 $size $size $size;
border-color: transparent transparent $color transparent;
bottom: 100%;
left: 50%;
margin-left: -$offset;
}
@else if $direction == "down" {
border-width: $size $size 0 $size;
border-color: $color transparent transparent transparent;
top: 100%;
left: 50%;
margin-left: -$offset;
}
// ... left/right 同理
}
调用时干净明确：@include triangle($direction: "up", $size: 8px, $offset: 4px);。最易被忽略的是：没加 content: "" 会导致伪元素不渲染，而 border-style: solid 在 Firefox 下缺省会失效——这两行不是可选的，是三角形成立的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
