用 sass @function 动态生成 box-shadow 值，通过层级参数 $level 计算 offset、blur、spread 和透明度，返回统一单位的字符串；不可用 css 变量替代，因其不支持运行时拼接且性能差。
怎么用 Sass function 动态生成 box-shadow 值
直接写死 box-shadow: 0 2px 4px rgba(0,0,0,0.1) 很快就会失控——换主题、调明暗、适配深色模式时全得手动改。Sass 的 @function 是唯一能真正解耦“视觉规则”和“具体数值”的方式。
核心思路是把阴影拆成「层级」概念：比如 $level-1 表示卡片浮起，$level-2 表示模态框，每级对应一套 offset、blur、spread 和透明度逻辑。
- 函数必须返回字符串（不是 map 或 list），否则
box-shadow属性不认 - 别在函数里写
@if $dark-mode这类条件——Sass 函数不能访问 CSS 环境变量，只处理编译时值 - 透明度建议用
rgba($color, $alpha)而非hsla()，避免颜色空间转换误差
@function shadow($level) {
$offset-y: ($level * 2) * 1px;
$blur: ($level * 2) * 2px;
$spread: if($level == 1, 0, $level * 0.5px);
@return 0 $offset-y $blur $spread rgba(0, 0, 0, 0.08 + $level * 0.02);
}
为什么不能用 CSS 自定义属性替代 Sass function
CSS 变量看着灵活，但 box-shadow 不支持在运行时拼接多个变量值：var(--shadow-x) var(--shadow-y) ... 会直接失效。浏览器解析时要求整个值是一条完整声明。
更实际的问题是性能：每次 JS 修改 --shadow-level，浏览器要重算整个层叠上下文的阴影，而 Sass 在编译期就固化了所有值，零运行时开销。
- 深色模式切换时，CSS 变量方案需同时维护两套
:root声明，极易漏掉某一级阴影 - Sass 方案只需一个
$is-dark: true变量，函数内部用if($is-dark, #fff, #000)分支即可 - 设计系统交付组件库时，下游开发者无法通过 CSS 变量覆盖
box-shadow的单个参数（比如只调 blur）
常见错误：阴影值单位混用导致编译失败
Sass 对单位敏感。写 0px 2px 4px 0 没问题，但 0 2px 4px 0rem 会报错 "Incompatible units: 'px' and 'rem'" —— 所有长度值必须统一单位。
- 函数内统一用
px，外部调用时再用rem转换（如shadow(2) / 16px * 1rem） - 避免用
calc()包裹函数返回值，Sass 不会解析 CSS 函数 - 如果设计稿给的是
dp或pt，先在函数外转成px再传入，别让函数承担单位转换职责
多层阴影叠加时的函数设计陷阱
需要内阴影 + 外阴影组合？别试图在一个函数里返回两个阴影值。Sass 的 @function 返回单字符串，而 box-shadow 支持逗号分隔，所以函数可以返回 "0 1px 2px rgba(...), inset 0 -1px 2px rgba(...)"。
- 用
inspect()调试返回值是否含非法空格或换行符（Sass 有时会意外插入\n） - 多层场景下，把「内阴影开关」做成布尔参数，比写两个独立函数更易维护
- 注意浏览器对多层阴影的渲染上限：Chrome 最多支持约 15 层，超出部分会被静默截断
最麻烦的其实是设计师给的「阴影描述」不标准——比如“微微浮起”对应哪一级？函数名必须直白，像 shadow-card() 比 shadow-light() 更不容易歧义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
