用 shadow-depth() 自定义函数封装 box-shadow，通过预设深度映射表返回带单位的合法 list 值，配合 #{...} 插值或 @mixin 调用，支持深色模式动态配色与 z-index 协同约定。
如何用 Sass 函数封装
并动态控制深度
直接说结论：用
自定义函数 + 预设深度映射表，比硬写多层
值更可控、可维护。别用
简单包裹——它没法做数值运算和条件映射，容易在换主题或适配深色模式时崩。
函数怎么写才不踩坑
核心是把“深度”这个语义概念，映射成真实可用的
值（
），而不是拼字符串。常见错误是返回带单位的字符串，导致无法参与计算或被 CSS 预处理器忽略。
必须返回一个合法的
值列表（Sass list），不是字符串
用
查表，别用
这类硬判断——加新层级时要改一堆
预设表里所有值都带单位（如
），避免运行时单位混用报错
为什么不能直接在
属性里调用函数
因为
是 CSS 属性，而 Sass 函数返回的是 Sass list，浏览器不认识。必须用
或属性内联展开。常见错误现象：
编译后变成空白或报错
。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
正确写法是：用
插值展开，或封装成
再调用
插值写法简洁但不可复用：
推荐封装为
，内部用
或直接展开，便于后续加逻辑（比如根据
自动切色）
注意：多层阴影返回的是 list，插值后会自动空格连接，无需手动
深色模式下阴影变灰还是变透？关键看颜色生成逻辑
很多人以为换个
就完事，结果在深底色上阴影“消失”。真正要动的是 alpha 值和 base color 的组合策略，不是简单替换。
立即学习
“
前端免费学习笔记（深入）
”；
别用固定
或
——它们在不同背景对比度下表现不稳定
推荐用
+ 变量控制明度：比如
，让灰阶随主题滑动
更稳妥的做法是把阴影颜色抽成变量
，在 dark mode 文件中重定义，函数本身不动
性能影响很小，但若在大量组件中高频调用，建议提前编译好各深度值，避免运行时查表开销
实际项目里最容易被忽略的，是阴影层级和 z-index 的同步问题——
往往意味着该元素应处于较高堆叠上下文，但函数本身不处理
。得靠设计系统约定或额外 mixin 配合，否则视觉“浮起感”会失真。
box-shadowshadow-depth()box-shadowmixinsshadow-depth()box-shadowh-offset v-offset blur spread colorbox-shadowmap-get($shadows, $depth)@if $depth == 'sm'@if0px 2px 4px 0px@function shadow-depth($depth: 'md') {
$shadows: (
'xs': (0px 1px 2px 0px rgba(0, 0, 0, 0.05)),
'sm': (0px 1px 3px 0px rgba(0, 0, 0, 0.1)),
'md': (0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)),
'lg': (0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05))
);
@return map-get($shadows, $depth);
}box-shadowbox-shadow@includebox-shadow: shadow-depth('lg');Invalid CSS after "...-shadow:": expected expression#{...}@mixinbox-shadow: #{shadow-depth('lg')};@mixin shadow($depth)@apply$color-modejoin()rgba(255, 255, 255, 0.08)rgba(0,0,0,...)rgba(255,255,255,...)hsl()hsl(0, 0%, if($dark-mode, 20%, 0%), $alpha)$shadow-color-baseshadow-depth('lg')z-index