Material Design 规范仅用两层阴影：底部主影+顶部柔光，Sass mixin按1–5dp自动生成对应参数；需用unquote()避免引号导致失效，变量命名比函数调用更安全高效。
box-shadow 的多层组合不是靠“写得越多越像”，而是按海拔高度（dp）映射到两层阴影的偏移、模糊和透明度变化。直接硬编码或堆砌5层阴影，反而偏离 Material Design 实际规范——它绝大多数场景只用 **两层阴影**：一层主投影（bottom），一层顶部柔光（top）。
用 card mixin 按 dp 值生成标准阴影
Material Design 官方推荐的阴影结构是「底部主影 + 顶部柔光」，Sass mixin 正好封装这个逻辑：
它接受 $depth（1–5），对应 1dp 到 24dp 海拔，自动计算两层参数。
-
$depth: 1→box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) -
$depth: 3→ 主影偏移加大、模糊加长、顶部柔光变浅，整体更“浮” - 不要传
0或6——@if $depth 和 <code>@elseif $depth > 5会拦截并警告 - 函数
bottom-shadow()和top-shadow()必须返回 Sass list（不是字符串），否则box-shadow编译失败
unquote() 是多层阴影生效的关键
当你用 @function 拼接多层阴影时，Sass 默认把整个结果当字符串处理，编译后带双引号，浏览器直接忽略整条 box-shadow 声明。
- 错误写法：
@return #{$offset} #{$blur} rgba(0,0,0,0.12)→ 输出"0 2px 4px rgba(0,0,0,0.12)" - 正确写法：先
join(", ", $shadow-list)，再套unquote()→ 输出无引号的合法 CSS 值 - 每一层必须是完整三元组（水平偏移、垂直偏移、模糊半径），漏掉模糊（哪怕写
0）会导致该层静默失效 - 移动端慎用 >8px 模糊值，Android WebView 会强制降采样，边缘发虚
变量命名比函数调用更常用也更安全
90% 的项目不需要运行时切换或 JS 读取阴影值，直接用语义化变量（如 $shadow-card、$shadow-modal）比 shadow("modal") 更快、更稳、更易协作。
-
$shadow-card值必须带单位：0px 2px 4px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24)—— 混用0和0px会触发Incompatible units编译错误 - 别用
$shadow-2这类像素命名，设计师说“卡片用中等阴影”，你改$shadow-card就行，不用全局搜shadow-4 - 深色模式不靠变量名区分，而是在主题文件里重定义同一变量：
$shadow-card: 0px 2px 4px rgba(255,255,255,0.08), ... - 禁止在变量里塞
inset或!important—— 这些属于使用上下文，应留在选择器里控制
.12 / .24、.14 / .12 等固定组合来匹配视觉重量。 
