sass 的 @for 循环是生成多层 box-shadow 的最优解：通过 $i 控制 blur（2px 起每层+1.5px）、spread（0 或 -0.2px）和 alpha（0.12/$i），用 append() 和 join() 构建列表后必须 unquote()；移动端建议≤4层，总模糊面积超 200px² 易掉帧。
用 @for 循环生成多层 box-shadow 值最直接
纯 CSS 写 5 层阴影容易漏逗号、错缩进，还难维护；Sass 的 @for 是唯一合理选择。关键不是“能不能”，而是循环变量怎么映射到阴影参数上——box-shadow 每一层是 h-offset v-offset blur spread color，其中 blur 和 spread 最适合按层数递增。
常见错误是把所有值都线性叠加，结果最外层模糊过大、颜色过淡，失去层次。实际应让内层偏锐利、外层偏柔和，同时控制透明度衰减节奏：
-
$base-blur从 2px 起步，每层 +1.5px（非整数避免生硬阶跃） -
$base-spread保持 0 或微负（-0.2px），靠模糊撑开视觉厚度 - 颜色用
rgba($color, $alpha)，$alpha按0.12 / $i衰减，第 1 层 0.12，第 5 层约 0.024
别用 @each 或 @while 处理固定层数阴影
@each 适合遍历已知列表，但阴影层数通常由设计系统定死（如 3 层基础、6 层深凹陷），硬套列表反而多写一行定义；@while 易忘设终止条件，编译时可能卡死。而 @for $i from 1 through $layers 语义清晰、边界明确，Sass 编译器也优化得最好。
实操中注意：$i 是整数索引，别直接当像素用。比如第 3 层的垂直偏移想比第 1 层多 2px，应写 #{$i * 1px} 而非 #{$i}px——后者会让第 1 层是 1px，第 2 层是 2px，第 3 层是 3px，偏移增长过快，破坏聚焦感。
生成的阴影字符串必须用 unquote() 解包才能生效
Sass 默认把拼接的字符串当带引号字面量处理，直接塞进 box-shadow: 会编译成 box-shadow: "0 1px 2px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.05)";，浏览器直接忽略整条声明。必须用 unquote($shadow-list) 去掉外层引号。
典型翻车点：
- 在
@function里拼好字符串但忘了unquote()，调试时看编译后 CSS 发现值被引号包着 - 用
+拼接时漏空格，如"0 1px 2px" + rgba(...)变成"0 1px 2pxrgba(...)" - 循环内用
append()收集每层值，最后用join($list, ", ")，但没对结果unquote()
移动端慎用超过 4 层阴影，尤其含大模糊值
iOS Safari 和旧版 Android WebView 对多层 box-shadow 的合成性能敏感，6 层 + 平均 blur: 8px 可能导致滚动掉帧。实测阈值是：总模糊面积（各层 blur × spread 之和）超过 200px² 时，中端机开始卡顿。
优化建议：
- 用
@if $env == 'mobile'切换层数变量，桌面 6 层，移动 3 层 - 对大模糊层（>6px）加
will-change: transform提前触发 GPU 合成 - 避免在
:hover动态插入多层阴影，改用transition: box-shadow渐变已有值
真正难的不是写循环，是判断哪几层该保留、哪几层可合并——比如第 4 和第 5 层如果模糊差小于 1px、透明度差低于 0.01，人眼根本分不出，删掉更稳。
