Sass 无法统一生成浏览器兼容的 CSS 前缀，因其仅做字符串替换且不读取 browserslist；真正起作用的是 PostCSS autoprefixer 插件，在 Sass 编译后的 CSS 上依据 browserslist 自动添加前缀。
不能用 Sass 统一生成浏览器兼容的 CSS 前缀——Sass 本身不处理前缀，也不读取 browserslist，所谓“统一生成”是误解。
为什么 @mixin autoprefixer 之类的写法根本无效
Sass 编译器只做字符串替换，它不知道 display: flex 在 iOS Safari 12.4 需要 -webkit-box，也不知道 clip-path 在 Safari 16+ 仍需 -webkit-clip-path。你写 @include transition(all, 0.3s)，它就真输出 -webkit-transition: all，而这个写法在旧 Safari 里会触发重绘 bug。
-
@mixin vendor($prop, $val)这类通用封装必然出错：传入display就生成非法的-webkit-display，直接编译失败 - Flex 布局需同时写
-webkit-box、-ms-flexbox、flex，但 transform 只需-webkit-和-ms-，无法用一个 mixin 覆盖 - 你改了
browserslist，Sass 不会重新判断该加哪些前缀——它根本不看这个文件
真正起作用的是 PostCSS autoprefixer 插件
Autoprefixer 是独立于 Sass 的 PostCSS 插件，它在 Sass 编译完成后的纯 CSS 字符串上运行，依据 browserslist 配置决定是否加前缀、加哪些前缀。你在 .scss 里写 display: flex，它编译成 display: flex，然后 autoprefixer 扫描这行 CSS，查表发现 iOS Safari 12.4 需要 -webkit-box，才补上。
- 必须确保构建流程中 CSS 真实经过 PostCSS：Webpack 要配
postcss-loader，且顺序在css-loader之后；Vite 默认启用，但若你写了css.postcss对象，会覆盖默认配置 -
postcss.config.js内容必须是module.exports = { plugins: [require('autoprefixer')] }，而不是空对象或只导出空数组 - 验证是否生效：在
postcss.config.js里写require('xxx')故意报错，启动构建——不报错说明该文件根本没被加载
什么时候还值得手写 @mixin？
仅限两种情况：一是目标浏览器明确要求某属性**必须带前缀才能生效**（如 -webkit-backdrop-filter），二是需要兜底极老环境（如 IE10 的 display: -ms-flexbox）。这时写固定组合的 mixin 是安全的，但不是“自动”，而是“手动适配”。
-
@mixin flex-center写死三行：display: -webkit-box;、display: -ms-flexbox;、display: flex;，不接受参数 -
@mixin backdrop-filter($v)直接输出-webkit-backdrop-filter: #{$v}; backdrop-filter: #{$v};，不尝试抽象成通用函数 - 别在 mixin 里用
#{'transform'}拼属性名——Sass 4.0+ 会校验属性名合法性，-webkit-transform合法，-webkit-display不合法
最终生成的 CSS 是否带前缀，只取决于 browserslist 配置和 autoprefixer 是否真实介入构建流程，跟 Sass 里写了几个 @include 没有因果关系。检查输出的 .css 文件，而不是盯着 .scss 源码数 -webkit- 出现了多少次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
