@mixin prefix($prop, $value) 必然失效，因 SCSS 编译器仅机械拼接字符串、不查 browserslist 或 Can I Use，导致无效语法（如-webkit-display）、漏加（IE10 的-ms-flexbox）、冗余（Chrome 中的-moz-box-shadow）；仅 backdrop-filter、旧 flex 分支等需手动固定声明的场景才适用 @mixin。
别写自动补全前缀的 SCSS @mixin —— 它做不到“自动”，只会制造冗余、错误和编译失败。
为什么 @mixin prefix($prop, $value) 必然失效
SCSS 编译器不查 browserslist，也不连 Can I Use，它只做字符串拼接。传入 display，它就硬塞 -webkit-display，而这是无效语法，直接导致编译报错 Invalid CSS after "-webkit-display"。传入 transform，它不会知道 Safari 需要 -webkit-、IE10 需要 -ms-、但 Firefox 早已不需要 -moz-。结果就是：该加的没加（如 IE10 的 display: -ms-flexbox），不该加的全加了（如现代 Chrome 里的 -moz-box-shadow）。
哪些属性必须手动用 @mixin 显式声明
Autoprefixer 不处理以下三类情况，必须靠 SCSS @mixin 手动并列写出带前缀 + 标准版，且顺序固定：
-
backdrop-filter：Safari 17.4 仍只认-webkit-backdrop-filter，Autoprefixer 完全不补 -
filter：iOS Safari 9–12 仅支持-webkit-filter，且@supports (filter: blur(0))检测不可靠 -
display: flex的旧引擎分支：-webkit-box（Android 4.4）、-ms-flexbox（IE10/11）——Autoprefixer 根本不生成这些专属语法
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
@mixin backdrop-filter($value) {
-webkit-backdrop-filter: $value;
backdrop-filter: $value;
}
@mixin flex-row-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
真正该依赖的流程：Sass → CSS → Autoprefixer
标准属性（如 box-shadow、transform、flex-grow）全部交给 Autoprefixer 处理，它会根据 browserslist 动态决定加不加、加哪个、删哪个。你只需在 SCSS 中写干净的标准语法：
.card {
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
确保构建链路生效的关键点：
- 检查
package.json是否有有效browserslist字段，例如："browserslist": ["> 1%", "iOS >= 14.5", "IE 11"] - 确认构建工具（Vite/Webpack）已启用 PostCSS 和 Autoprefixer；若用 Vite，默认集成，但禁用 PostCSS 插件会导致前缀丢失
- 不要在 SCSS 里手写
-webkit-box-shadow再指望 Autoprefixer “优化”——它默认跳过所有已带前缀的声明
最易被忽略的是：IE10/11 的 -ms-flexbox 和旧 Android 的 -webkit-box 必须手动写进 SCSS；而 -webkit-filter 这类属性，Autoprefixer 压根不碰——它们不是“前缀问题”，是“专属语法存活期”问题，得靠明确、固定、不参数化的 @mixin 来兜底。
