Sass与PostCSS需分工协作：Sass负责变量、嵌套等结构组织，PostCSS负责前缀补全、语法降级等跨端输出；顺序不可颠倒，否则PostCSS无法解析SCSS语法。
能解决的兼容性问题，取决于你让谁干谁的活——Sass 不处理前缀、不降级新语法、不补缺失能力；PostCSS 也不管变量怎么组织、嵌套怎么写。两者配合，才能覆盖从「写」到「发」的全链路。
autoprefixer 必须靠 PostCSS 运行，Sass 无法替代
Autoprefixer 是解决 display: flex、transform、gap 等属性浏览器前缀的核心工具，但它只在标准 CSS 字符串上工作：
- 它读取
browserslist配置，查 Can I Use 数据库，动态决定要不要加-webkit-、删-ms- - Sass 的
@mixin flex-center或硬写display: -webkit-box是静态展开，无法响应浏览器演进，容易漏、冗余、过时 - 若
sass-loader在postcss-loader后执行（或顺序颠倒），Autoprefixer 根本收不到有效 CSS，输出里搜不到-webkit-box就是典型信号
@nest 和 @apply 只能在 PostCSS 阶段生效
@nest 是原生 CSS 嵌套语法草案，@apply 是 Tailwind 提供的工具类复用指令——它们和 Sass 的 &__item 无关，Sass 编译器完全不认识：
- Dart Sass 遇到
@nest &__title { color: red; }会直接报Unknown rule @nest或静默跳过 -
postcss-nestingv10+ 才真正支持@nest，且要求&必须紧贴@nest后，中间不能有空格：@nest &:hover✅，@nest & :hover❌ -
@apply只能在后缀为.css的文件中写，且该文件必须被 PostCSS 流程处理；写在.scss里等于注释
Sass 负责结构统一，PostCSS 负责跨端输出稳定
跨端兼容不只是加前缀，还包括值管理、断点控制、自定义属性降级等，需要两者分工：
立即学习“前端免费学习笔记（深入）”；
- Sass 用
$breakpoint-sm: 480px+@mixin for-phone { @media (max-width: $breakpoint-sm) { @content } }统一响应式逻辑，避免各处硬写480px - PostCSS 插件如
postcss-custom-properties能把--color-primary: #{$primary}输出的 CSS 变量，降级为color: #3498db（需 Sass 先输出带变量的标准 CSS） -
postcss-preset-env可提前用aspect-ratio、container查询，自动 fallback 到padding-top百分比方案——但前提是 Sass 已把变量、嵌套编译干净，PostCSS 才能安全操作 AST
最容易被忽略的是：只要项目里存在任意一个 @import（包括第三方库或 additionalData 注入），Dart Sass 就退化为 legacy 模式，@use 失效、命名空间消失、样式 inline 拼接——PostCSS 收到的是一团结构失控的 CSS，前缀、嵌套、变量全部不可控。这不是配置微调问题，是整个输入源已损坏。检查 @import 存在与否，比调 postcss.config.js 顺序更优先。
