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

张开发
• 2026/4/11 13:05:56 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

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 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西

更多文章