CSS如何通过Sass实现投影阴影封装_通过函数动态调节阴影深度

用 shadow-depth() 自定义函数封装 box-shadow，通过预设深度映射表返回带单位的合法 list 值，配合 #{...} 插值或 @mixin 调用，支持深色模式动态配色与 z-index 协同约定。如何用 Sass 函数封装 box-shadow 并动态控制深度直接说结论：用 shadow-depth() 自定义函数 + 预设深度映射表，比硬写多层 box-shadow 值更可控、可维护。别用 mixins 简单包裹——它没法做数值运算和条件映射，容易在换主题或适配深色模式时崩。shadow-depth() 函数怎么写才不踩坑核心是把“深度”这个语义概念，映射成真实可用的 box-shadow 值（h-offset v-offset blur spread color），而不是拼字符串。常见错误是返回带单位的字符串，导致无法参与计算或被 CSS 预处理器忽略。必须返回一个合法的 box-shadow 值列表（Sass list），不是字符串用 map-get($shadows, $depth) 查表，别用 @if $depth == 'sm' 这类硬判断——加新层级时要改一堆 @if预设表里所有值都带单位（如 0px 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-shadow 属性里调用函数因为 box-shadow 是 CSS 属性，而 Sass 函数返回的是 Sass list，浏览器不认识。必须用 @include 或属性内联展开。常见错误现象：box-shadow: shadow-depth('lg'); 编译后变成空白或报错 Invalid CSS after "...-shadow:": expected expression。 Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西