autoprefixer才是真正干活的，sass本身不加前缀；sass仅做字符串替换，不读browserslist，也不知各属性在不同浏览器所需前缀，真实链路是sass→css→postcss→autoprefixer→终版css。
Autoprefixer 才是真正干活的，Sass 本身不加前缀
Sass 编译器（如 dart-sass）只做字符串替换和语法转换，它完全不读取 browserslist，也不知道 display: flex 在 iOS Safari 12.4 需要 -webkit-box，更不会判断 clip-path 是否该补 -webkit-clip-path。你写 @include transition(all, 0.3s)，它就真输出 -webkit-transition: all——而这个写法在旧 Safari 里会触发重绘 bug。
所谓“Sass 自动加前缀”是常见误解。真实链路必须是：sass → 输出标准 CSS → postcss → autoprefixer → 带前缀的终版 CSS。
- 验证是否生效：在
postcss.config.js中故意写require('xxx')，启动构建——不报错说明该文件根本没被加载 - Webpack 用户需确保
postcss-loader在css-loader之后，且插件顺序正确 - Vite 默认启用 Autoprefixer，但若你在
vite.config.js中写了css.postcss对象，会覆盖默认配置，导致失效
哪些情况还值得手写 @mixin？
仅限两类明确场景：一是属性**必须带前缀才生效**（如 backdrop-filter），二是兜底极老环境（如 IE10 的 display: -ms-flexbox）。这时写固定组合的 mixin 是安全的，但不是“自动”，而是“手动适配”。
推荐写法示例：
@mixin backdrop-filter($value) {
-webkit-backdrop-filter: $value;
backdrop-filter: $value;
}
@mixin flex-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
- 不接受动态参数（如
@mixin vendor($prop, $val)），避免生成-webkit-display这类非法语法 - 顺序必须固定：前缀版在前，标准版在后；否则某些浏览器（如 Safari）可能忽略标准声明
- 不试图覆盖所有属性——
flex需三行，transform只需两行，无法统一抽象
为什么不能用 @mixin 替代 Autoprefixer？
因为 Sass 编译期无法响应浏览器演进。你改了 browserslist，Sass 不会重新判断该加哪些前缀——它根本不看这个文件。而 Autoprefixer 每次都扫描输出的 CSS 字符串，查 Can I Use 数据表，按当前 browserslist 动态决定加/删/保留哪些前缀。
典型错误现象：
-
@mixin flex-center输出了-ms-flexbox，但你的browserslist已不含 IE，结果冗余前缀污染 CSS - 开发时靠 mixin 跑通，上线后没接 Autoprefixer，iOS 14.5 Safari 因缺少
-webkit-clip-path直接白屏 - 你手动写了
-moz-transform，但browserslist里没 Firefox，Autoprefixer 会把它删掉——mixin 和 Autoprefixer 优先级不同，后者覆盖前者
如何验证前缀是否真的加对了？
别看 .scss 源码里写了几个 -webkit-，直接检查最终输出的 CSS 文件内容。重点看三点：
- 目标浏览器是否出现在
browserslist中（例如"iOS >= 14.5"） - 对应属性是否生成了预期前缀（如
display: flex→ 是否有-webkit-box、-ms-flexbox） - 是否有多余前缀（如现代 Chrome 里仍出现
-moz-appearance，说明browserslist配置过宽或未生效）
最易被忽略的是：Autoprefixer 不会为 backdrop-filter 补前缀，除非你先写上 -webkit-backdrop-filter —— 它只追加标准版，不“强行补前缀”。这类属性必须手动声明前缀版，再交由 Autoprefixer 处理后续逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
