应使用 Autoprefixer 按 browserslist 动态加前缀，而非手写 mixin 展开；它精准识别 Safari 17.4 无需 -webkit-box-shadow、Android 4.4 WebView 必须保留，而手动 mixin 冗余且易出错。
box-shadow 不能只靠 @mixin 硬写前缀
直接用 @mixin box-shadow 手动展开 -webkit-box-shadow、-moz-box-shadow 等，看似简洁，实则危险。现代 Chrome/Firefox/Safari 已完全支持无前缀 box-shadow，但你的 SCSS 仍会强制输出冗余前缀，增大 CSS 体积，还可能干扰某些旧版 WebView 的解析逻辑。
真正该走的路径是：SCSS 写标准语法 → 编译为纯 CSS → 交由 Autoprefixer 按 browserslist 动态决定是否加前缀。它知道 Safari 17.4 不需要 -webkit-box-shadow，也知道 Android 4.4 WebView 必须保留它——而手写 mixin 做不到这点。
必须确保 Autoprefixer 在 Sass 编译之后运行
Autoprefixer 是 PostCSS 插件，只处理标准 CSS 字符串，不认 .scss 源码。如果你用 Vite/Webpack/CRAC，大概率已内置，但容易被忽略的是执行顺序：
- 错误链路：
sass → Autoprefixer → css（Autoprefixer 收到的是 SCSS 源码，直接报错或跳过） - 正确链路：
sass → css → Autoprefixer → final.css
Webpack 用户请检查 postcss-loader 是否在 sass-loader 之后；Vite 用户默认满足，但需确认 package.json 中有有效 browserslist 字段，例如：
立即学习“前端免费学习笔记（深入）”；
"browserslist": ["> 1%", "iOS >= 14.5", "not dead"]
哪些阴影场景仍需手动加前缀？
绝大多数 box-shadow 场景已被 Autoprefixer 完全覆盖，但以下例外必须显式声明：
-
backdrop-filter：Safari 17.4 仍只认-webkit-backdrop-filter，且 Autoprefixer 不会为它补前缀（因无前缀版本本身不生效） - 搭配
filter: drop-shadow()的复合效果：部分安卓 WebView 对无前缀filter支持不稳定
此时应写语义化 @mixin，而非通用前缀函数：
@mixin backdrop-shadow($blur, $color) {
-webkit-backdrop-filter: blur($blur) drop-shadow(0 2px 4px $color);
backdrop-filter: blur($blur) drop-shadow(0 2px 4px $color);
}
注意顺序：带前缀的必须在前，否则老 Safari 可能忽略整条规则。
别碰“自动前缀”类 mixin，尤其带插值的
像 @mixin vendor($prop, $val) 这种泛化封装，看着聪明，实际埋雷：
- 若传入
display，生成-webkit-display—— 语法非法，编译直接失败 - 若传入
flex-direction，-webkit 版本对应的是-webkit-box-orient，不是简单拼接 - IE10 的
-ms-flexbox和现代flex属于不同模型，无法用同一套参数映射
复杂点在于：前缀不是字符串替换游戏，而是浏览器渲染引擎的语法分支。一个属性是否需要前缀、需要哪几个、顺序如何，全取决于目标浏览器的版本和实现路径——只有 Autoprefixer 这类基于 Can I Use 数据的工具才可靠覆盖。
