旧版IE（IE8及以下）完全忽略不支持的CSS规则，需在Sass编译后用Autoprefixer加前缀，并手动处理透明度、flex等兼容；@supports和SCSS条件判断均无效，须靠变量驱动降级逻辑。
旧版 IE（IE8 及以下）不认 Sass 编译后的标准 CSS，不是“样式没生效”，而是直接跳过整条规则——比如 display: flex 在 IE8 里等于不存在，连 fallback 都不会触发。关键得在编译链路和输出层双重控制。
Autoprefixer 必须在 Sass 编译之后运行
Autoprefixer 是 PostCSS 插件，只处理最终的 CSS 字符串，不读 .scss 源码。它靠 browserslist 查 Can I Use 数据动态加/删前缀，而 Sass 的 @mixin 在编译期就硬展开，完全无法响应浏览器演进。
- 错误做法：在
.scss里写@include flex-center，以为搞定兼容，结果输出里缺-ms-flexbox或残留已废弃的-webkit-box - 正确流程必须是：
sass → 标准 CSS → postcss + autoprefixer → 终版 CSS - Webpack 用户注意：
postcss-loader的plugins数组里要显式写require('autoprefixer')，不能只靠css-loader默认行为 - 直接打开编译后的
.css文件搜索-ms-flexbox，而不是看.scss源码里有没有前缀
IE8 透明度和颜色必须用 filter + ie_hex_str()
opacity 和 rgba() 在 IE8 及以下完全无效，且 -ms-opacity 是非法语法。浏览器遇到这类声明会直接跳过整条规则，连 fallback 都不会触发。
- 不要写
opacity: 0.6或background: rgba(0, 0, 0, 0.6) - 改用
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)，其中#99000000是ie_hex_str(rgba(0,0,0,0.6))的结果 - 必须同时写
filter和-ms-filter，并加zoom: 1触发hasLayout - Sass 中调用函数要写成
ie_hex_str($color)，不能写#{ie-hex-str($color)}——连字符会让 Sass 解析失败 - 安全 alpha 值仅限
0.6（99）、0.7（CC）、0.8（E6）、0.9（F2）；0.5及以下在 IE8 中常渲染为全不透明
别指望 @supports 或 @if feature-exists() 自动适配 IE
@supports (display: flex) 是标准 CSS 规则，会被原样输出；IE11 完全忽略它，里面的内容根本不会执行。而 @if feature-exists(display: flex) 根本不合法——SCSS 编译器只查函数是否存在，根本不理解 CSS 渲染能力。
立即学习“前端免费学习笔记（深入）”；
- 所有降级逻辑必须靠手动变量驱动，比如顶层定义
$legacy-support: true - 封装整套兼容写法到
@mixin中，例如：@mixin flex-center { @if $legacy-support { display: -ms-flexbox; display: flex; } @else { display: flex; } } - 条件注释只能硬编码在 HTML 中，且仅对 IE9 及以下有效：
<!--[if lt IE 9]><link rel="stylesheet" href="ie8-and-down.css"><![endif]-->，从 IE10 开始被彻底移除 - 注意空格与括号必须严格匹配：
[if lt IE 9]✅，[if ltIE9]❌
最易被忽略的点是：Sass 编译器看不到 JS 动态设置的 CSS 变量，也读不到跨文件定义的 :root 变量；所有需降级的 var(--x) 必须声明。
