SCSS @mixin参数遇逗号会被截断为多个参数，正确解法是在形参后加$shadows...声明剩余参数，使整个逗号分隔列表作为单个list传入；传字符串则导致类型混淆、无法校验与调试困难。
SCSS @mixin 参数遇到逗号会被截断为多个参数
SCSS 编译器默认把逗号当作参数分隔符，不是 CSS 值的一部分。你写 @include shadow(0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15))，Sass 就认为你传了两个参数：第一个是 0 2px 4px rgba(0,0,0,0.1)，第二个是 0 4px 12px rgba(0,0,0,0.15)——哪怕你的 @mixin shadow 只声明了一个形参，也会报 argument count mismatch 或静默丢掉后半段。
正确解包多值参数必须用 $shadows... 语法
要让 Sass 把整个逗号分隔列表当做一个参数接收，定义时必须在参数名后加三个点：$shadows...。这不是省略号，是 SCSS 的“剩余参数”语法，告诉编译器：“后面所有逗号分隔的项，全塞进这个变量里”。
- ✅ 正确写法：
@mixin box-shadow($shadows...) { box-shadow: $shadows; } - ❌ 错误写法：
@mixin box-shadow($shadows) { box-shadow: $shadows; }（只收第一个值） - ⚠️ 调用时不能额外套括号：
@include box-shadow((0 2px 4px red, 0 4px 8px blue))会变成嵌套列表，$shadows类型是list of list，输出错乱
传字符串拼接不如传原始值+逻辑生成
有人试图绕过这个问题，把整个阴影值写成字符串传进去：@include shadow("0 2px 4px red, 0 4px 8px blue")。这看似能过编译，但隐患极多：
- 单位缺失无法校验：传
"0 2px 4px red"没问题，但传"0 2 4 red"也不会报错，CSS 直接失效 - 无法参与运算：你想统一给所有阴影加
inset？字符串没法用@each遍历处理 - 调试困难：浏览器 DevTools 里看到的是完整字符串，没法定位哪一段出错；Sass 编译期也不做语法检查
- 类型混淆：Sass 会把数字
0和字符串"0"当不同类型，if type-of($shadows) == 'string'和== 'list'行为不一致
真正容易被忽略的是：参数解包和插值不是一回事
$shadows... 是编译期参数收集，不是运行时字符串拼接。你不能指望它自动把 0 2px 4px red 解析成独立属性再加前缀；它只是原样透传。如果需要兼容旧浏览器的多前缀阴影，得手动写逻辑：-webkit-box-shadow: $shadows;，而不是幻想 Sass 会帮你拆开、补前缀、再合并。这种“透传即责任”的边界，恰恰是多数人调试失败的起点。
立即学习“前端免费学习笔记（深入）”；
