autoprefixer是解决css厂商前缀问题的主力，必须在sass编译后处理标准css字符串，基于browserslist动态加/删前缀；@mixin仅适用于backdrop-filter等需手动声明的特殊场景，无法替代其智能适配能力。
Autoprefixer 是解决 CSS 厂商前缀问题的主力，SCSS @mixin 只能作为兜底或特殊场景补充；单独靠 @mixin 写前缀已不可靠，容易漏、冗余、过时。
Autoprefixer 必须在 Sass 编译之后运行
Autoprefixer 是 PostCSS 插件，不解析 .scss 源码，只处理最终生成的标准 CSS 字符串。它依赖 browserslist 配置查 Can I Use 数据，动态决定是否加 -webkit-、删 -moz- 等——而 @mixin 在编译期就硬展开，完全无法响应浏览器演进。
- 常见错误：在
.scss里写@include flex-center，以为搞定兼容，结果输出 CSS 里没有-ms-flexbox（因为目标浏览器不含 IE10），或保留了早已废弃的-webkit-box - 真实流程必须是：
sass→ 输出标准 CSS →postcss + autoprefixer→ 输出带/不带前缀的终版 CSS - 如果你用 Vite/Webpack/CRAC，Autoprefixer 默认已集成，但务必检查
package.json中是否有有效的browserslist字段，例如："browserslist": ["> 1%", "iOS >= 14.5"]
哪些场景还值得写 @mixin？
不是所有前缀都能靠 Autoprefixer 覆盖，尤其当属性本身需「带前缀才生效」时（如 backdrop-filter），这时 @mixin 是明确声明意图的手段，而非替代 Autoprefixer。
-
backdrop-filter：Safari 17.4 仍只认-webkit-backdrop-filter，Autoprefixer 不会把无前缀版本“强行补前缀”，你得自己写-webkit-backdrop-filter: blur(4px)，它才会在后面追加标准版 -
dialog元素、scroll-behavior: smooth在部分安卓 WebView 中同样需要手动前置厂商声明 - 推荐写法：
@mixin backdrop-filter($value) { -webkit-backdrop-filter: $value; backdrop-filter: $value; }—— 顺序固定，不传参泛化，不拼字符串
为什么不能用 @mixin 封装“自动加前缀”的通用函数？
Sass 编译器无法在编译期判断 #{\$prop} 的实际值，更无法知道该属性在目标浏览器中是否需要前缀，所谓“自动”只是按经验硬编码，极易出错。
- 错误示例：
@mixin vendor($prop, $val) { -webkit-#{$prop}: $val; #{$prop}: $val; }—— 若$prop是display，生成-webkit-display，这是无效语法，直接导致编译失败 - Flex 属性需同时支持
-webkit-box、-ms-flexbox、flex，但transform只需-webkit-和-ms-，不同属性前缀组合完全不同，无法用一个 mixin 统一覆盖 - Sass 4.0+ 对属性名校验变严，
#{'transform'}这类动态拼接在某些版本下会被拒绝，而 Autoprefixer 处理的是已确定的、合法的 CSS 字符串，无此风险
验证你是否真正在用 Autoprefixer，而不是只靠 mixin
别看 .scss 源码里写了几个 -webkit-，关键看最终输出的 CSS 文件内容——这才是浏览器真正加载的东西。
- 打开构建后的
.css文件，搜索clip-path：如果只写了clip-path: polygon(...)，但输出里有-webkit-clip-path，说明 Autoprefixer 生效；若只有标准版且没前缀，而项目要兼容 iOS 14.5，则兼容性已断裂 - 搜索
transform：Chrome 115+ 不需要前缀，但旧版 Safari 需要，正确输出应包含-webkit-transform且不含-moz-transform（除非 browserslist 明确含 Firefox 旧版） - 最易被忽略的一点：Autoprefixer 不处理你没写的属性。比如你忘了写
gap，它不会帮你补；但你写了aspect-ratio，它会按 browserslist 决定是否加-webkit-—— 所以写标准 CSS 是前提，不是可选项
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
