@mixin prefix() 必然失效，因 SCSS 编译器不查 Can I Use 或 browserslist，仅机械展开字符串，而各属性前缀规则差异大、顺序敏感且浏览器支持动态变化。
别写通用 @mixin prefix($prop, $value)。它不会“自动化”，只会硬塞前缀，结果漏、错、冗余——比如给 display 加 -webkit- 直接编译失败，或在已不需要的浏览器里保留早已废弃的 -moz-。
为什么 @mixin prefix() 必然失效
SCSS 编译器不查 Can I Use，也不读 browserslist，它只按你写的字符串机械展开。而不同属性的前缀规则根本不同：
-
transform需要-webkit-（iOS）、-ms-（IE10），但不需要-moz- -
display: flex要三套：-webkit-box、-ms-flexbox、flex，且顺序不能颠倒 -
backdrop-filter在 Safari 17.4 仍只认-webkit-backdrop-filter，Autoprefixer 不会补这个前缀 -
transition: all在旧 Safari 有重绘 bug，但@mixin不知道你传的是all还是opacity
哪些场景才值得写 @mixin
只封装明确、稳定、高频、属性名和值都固定的组合，不接受参数，不拼字符串：
-
@mixin flex-center：内部写死display: -webkit-box; display: -ms-flexbox; display: flex;，以及对应的老属性如-webkit-box-pack和-ms-flex-pack -
@mixin backdrop-filter($value)：只做两行-webkit-backdrop-filter: $value;+backdrop-filter: $value;，顺序固定 -
@mixin scroll-smooth：针对scroll-behavior: smooth在部分安卓 WebView 中失效的问题，手动加-webkit-scroll-behavior
真正该依赖的流程是：sass → css → postcss + autoprefixer
Autoprefixer 是 PostCSS 插件，在 Sass 编译完成后的标准 CSS 上运行，根据 browserslist 配置动态决定加不加、加哪个前缀。它能删掉过时前缀（比如你写了 -moz-transform，但配置不含 Firefox，它就删）、也能补新前缀（比如 clip-path 对 iOS 14.5 仍需 -webkit-）。
- 确保构建链路完整：Vite/Webpack 默认集成，但必须检查
package.json里有有效browserslist字段，例如："browserslist": ["> 1%", "iOS >= 14.5"] - 不要在 SCSS 里写
-webkit-然后指望 Autoprefixer “优化”——它只处理标准属性，遇到-webkit-前缀默认跳过或保留 - 验证方式很简单：看最终输出的 CSS 文件，而不是 SCSS 源码里写了几个
-webkit-
最易被忽略的一点：IE10/11 的 -ms-flexbox 和旧 Android 的 -webkit-box，Autoprefixer 完全不生成，必须手动写进 SCSS；而 -webkit-filter 这类属性，Autoprefixer 也不会补——它只处理标准属性的前缀，不处理“必须带前缀才生效”的特例。这两类，才是 @mixin 的真实用武之地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
