用语义化Sass变量（如$shadow-sm）统一管理box-shadow值是最轻量可持续的方案，按视觉层级而非像素分档，配合map实现多态扩展，并可生成CSS变量兼顾动态主题与编译期逻辑。
如何用Sass变量统一管理box-shadow值
直接结论：用$shadow-sm、$shadow-md、$shadow-lg这类语义化变量替代硬编码的box-shadow字符串，是最轻量也最可持续的全局阴影方案。
硬写box-shadow: 0 2px 4px rgba(0,0,0,.1)看似快，但改一处得搜全项目、漏一个就风格断裂。Sass变量能保证所有组件阴影层级一致，且后续调整只需改变量定义。
- 变量名必须带语义（如
$shadow-card比$shadow-1更可靠） - 建议按视觉层级分档，而不是按像素值分档——
$shadow-md对应“卡片浮起”，不是“y偏移2px” - 避免在变量里写
!important或inset等修饰，这些应留在具体选择器中控制
Sass中定义可扩展的阴影映射表（map）
当项目需要更多变体（如悬停增强、禁用态弱化、深色模式适配），单靠变量不够灵活，这时用$shadows map更合适。
它本质是键值对集合，比如card: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06)，后续通过map-get($shadows, card)调用。
立即学习“前端免费学习笔记（深入）”；
- map结构便于批量生成工具类（如
.shadow-card），也方便主题切换时整体替换 - 注意Sass 3.3+才支持
map-get，旧项目需确认版本 - 不要把颜色写死在map里——用
rgba($black, .1)配合全局$black变量，换主题时自动生效
为什么不能直接用CSS自定义属性（CSS Custom Properties）代替Sass变量
因为运行时无法用var(--shadow-md)参与calc或条件逻辑，而Sass变量在编译期就能做计算和分支。
比如你想让按钮悬停阴影比默认强一级：box-shadow: $shadow-md + ' , ' + $shadow-sm——这种拼接CSS变量做不到，但Sass可以。
- CSS变量适合动态主题切换（JS控制），Sass变量适合构建时静态统一
- 两者不互斥：可以用Sass生成CSS变量，如
:root { --shadow-md: #{$shadow-md}; } - 如果项目已用CSS变量做主题，Sass层只负责生成它们，别再重复定义一套
容易被忽略的阴影性能与可访问性影响
多层叠加阴影（比如3个box-shadow值连写）会轻微增加渲染开销，尤其在滚动容器内；同时，过低对比度的阴影在暗色背景上可能违反WCAG文本对比度要求。
- 移动端慎用
blur-radius > 24px，部分iOS Safari会触发CPU渲染而非GPU加速 - 深色模式下，别直接复用浅色阴影值——
rgba(0,0,0,.1)在#121212背景上几乎不可见，应改用rgba(255,255,255,.08)之类 - 组件库若暴露
shadowprop（如React组件），内部必须校验传入值是否在预设map中，防止任意字符串破坏设计系统一致性
真正难的不是定义几个变量，而是让设计师、前端、组件库维护者对“sm/md/lg”代表的视觉重量达成共识，并在所有使用点保持约束力。
