Sass本身不解决兼容性，它只是编译器；真正起作用的是编译链路顺序、browserslist配置及对IE特有机制（如filter、ie_hex_str()）的手动干预。
直接说结论：Sass 本身不解决兼容性，它只是编译器；真正起作用的是编译链路顺序、browserslist 配置、以及对 IE 特有机制（如 filter、ie_hex_str()）的手动干预。靠 @mixin 封装“一键兼容”反而最容易翻车。
Autoprefixer 必须在 Sass 编译之后运行
Autoprefixer 是 PostCSS 插件，只处理最终的 CSS 字符串，不读 .scss 源码。它依赖 browserslist 查 Can I Use 数据动态加前缀，而 Sass 的 @mixin 在编译期就硬展开，完全无法响应浏览器演进。
- 错误流程：
sass → @include flex-center → 输出无 -ms-flexbox（因为 mixin 里没写） - 正确流程：
sass → 标准 CSS → postcss + autoprefixer → 终版 CSS - 检查
package.json中是否有有效browserslist，例如："browserslist": ["> 1%", "IE >= 9"]；IE8 需显式写"IE 8"，否则不会生成-ms-前缀 - Flexbox 场景下，必须同时写两套声明：
display: flex和display: -ms-flexbox；justify-content: center要对应写-ms-flex-pack: center
IE8 的透明度不能用 @mixin opacity 封装
opacity 属性本身在 IE8 及以下无效，-ms-opacity 是非法语法。IE8 唯一能识别的是 filter: progid:DXImageTransform.Microsoft.gradient，且必须用 ie_hex_str() 把 rgba() 转成带 alpha 的十六进制色值（如 #99000000）。
- 安全 alpha 值仅限
0.6（99）、0.7（CC）、0.8（E6）、0.9（F2）；0.5及以下常渲染为全不透明 - 必须同时写
filter和-ms-filter，并加zoom: 1触发 hasLayout - 别用
#{ie-hex-str($color)}——Sass 解析连字符会失败，正确写法是ie_hex_str($color) - 推荐写成独立的
@mixin ie8-opacity($color, $alpha)，只负责 IE 部分，和标准opacity并存
CSS 自定义属性（--color-primary）在老浏览器中根本不可用
IE11 及更早、Android 4.4 WebView、iOS 8 Safari 完全忽略 --* 声明，连 var(--x, #fff) 的 fallback 都不会触发——解析器直接跳过整条规则。
立即学习“前端免费学习笔记（深入）”；
- 实操方案：用
postcss-custom-properties在构建时静态替换，前提是所有变量值都是静态的（不能是 JS 动态设置的） - 避免在关键路径（如按钮默认色、表单边框）上依赖 CSS 变量；主色调、间距等应预设为固定值
- 别用
CSS.supports('property', '--foo')做运行时降级——IE11 不支持这个 API，会直接报错 -
css-vars-ponyfill性能开销明显，每次调用都遍历全部 DOM、重写所有匹配的var()，页面越大越卡
最易被忽略的一点是：Sass 编译器看不到 JS 动态设置的 CSS 变量，也读不到跨文件定义的 :root 变量；所有需降级的 var(--x) 必须在编译期就能确定值。这不是配置问题，是工具链能力边界。
