autoprefixer不能直接在sass文件里用，因为它是postcss插件，仅作用于sass编译后的标准css，不识别scss语法（如变量、@mixin），且前缀添加依赖browserslist动态判断，而非sass编译时的静态拼接。
autoprefixer 为什么不能直接在 Sass 文件里用？
因为 autoprefixer 是 PostCSS 插件，运行在 CSS 编译后阶段，而 Sass 编译器（sass 或 node-sass）只处理变量、嵌套、混合等语法，不解析或补全浏览器前缀。你在 .scss 里写 display: flex，Sass 会原样输出，不会自动加 -webkit-display: flex —— 它压根不关心这个。
所以想实现“批量前缀注入”，必须把 Sass 和 PostCSS 配合起来用，而不是指望 @mixin 自己硬写一堆 -webkit-。
如何用 PostCSS + autoprefixer 实现真正可靠的批量前缀
核心是：先让 Sass 编译成标准 CSS，再交给 PostCSS 处理。常见错误是只配了 Sass 构建，却漏掉 PostCSS 步骤。
- 确保构建流程中包含 PostCSS（比如 Webpack 用
postcss-loader，Vite 默认已集成，Rollup 用rollup-plugin-postcss） -
autoprefixer需要明确指定目标浏览器范围，靠browserslist配置，不是靠 Sass 变量控制 - 在项目根目录放
.browserslistrc，内容例如：last 2 versions<br>not dead<br>Chrome >= 87
- 不要在 Sass 里手动写
-webkit-transition这类规则——它会被 autoprefixer 覆盖或重复添加，反而导致冗余
什么时候才该在 Sass 里手动加前缀？
极少数 autoprefixer 不支持的场景，比如某些实验性属性或 WebKit 特有行为（如 -webkit-line-clamp），这时才需要手动干预。
- 优先封装成
@mixin，避免重复写：@mixin line-clamp($lines) {<br> display: -webkit-box;<br> -webkit-line-clamp: $lines;<br> -webkit-box-orient: vertical;<br> overflow: hidden;<br>} - 注意：这些手动前缀不会被 autoprefixer 删除，所以得自己判断是否与目标浏览器兼容
- 不要对
transform、flex、transition等主流属性这么做——autoprefixer 已覆盖完整，手动加反而容易漏掉某个引擎
常见误操作：用 @each 遍历属性名模拟前缀
有人试图用 Sass 的 @each + @mixin 拼接前缀，比如循环 webkit moz ms o，这种方案问题很大：
- 无法动态判断哪些属性在哪些浏览器需要哪些前缀（比如
gap在 Safari 14.1+ 才无需-webkit-） - 生成大量无效 CSS（如给现代 Chrome 加
-ms-transform） - 维护成本高，每次浏览器更新都要改 mixin
- 和 autoprefixer 共存时可能冲突，导致双倍前缀或覆盖失效
真正稳定的批量前缀，永远依赖运行时的浏览器能力探测，不是编译时的字符串拼接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
