SCSS 本身不解决 IE 兼容问题，真正起作用的是构建链路中 Autoprefixer 的介入时机、browserslist 配置、手动降级写法（如 filter 替代 opacity）、正确调用 ie_hex_str() 函数、避免 @supports 误用，以及 CSS 变量的 fallback 写法。
SCSS 本身不解决 IE 兼容问题，它只是把 @mixin 展开成静态 CSS；真正起作用的是构建链路中是否接入 Autoprefixer、是否显式启用 $legacy-support 变量控制降级输出，以及你有没有手动绕过 IE 的解析限制（比如用 filter 替代 opacity）。
Autoprefixer 必须在 Sass 编译之后运行
很多人以为在 SCSS 里写 @include flex-center 就能自动兼容 IE，其实这只是机械展开，Autoprefixer 完全没机会介入。它只处理最终的 CSS 字符串，不是 SCSS 源码。
- 检查构建流程：必须是
sass → CSS → postcss + autoprefixer → 最终 CSS，顺序错就等于没加 - 确认
browserslist包含明确旧版本，例如"IE >= 9"或"IE 8"；写"last 2 versions"不会生成-ms-前缀 - 直接打开编译后的
.css文件搜索-ms-flexbox，而不是看.scss源码里有没有前缀 - Webpack 用户注意：
postcss-loader的plugins数组里要显式写require('autoprefixer')，不能只靠css-loader默认行为
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.5（即十六进制
7F以下）在 IE8 中常渲染为全不透明，建议只用0.6（99）、0.7（CC）、0.8（E6）
别指望 @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; ... }} - 避免混写：同一个选择器里不要同时写
display: flex和display: -ms-grid，IE11 会取最后一个但计算逻辑冲突 -
@supports只能用于现代浏览器增强，必须搭配无包裹的 IE 专用样式，或用条件注释加载独立ie-fix.css
CSS 变量在 IE 中整条声明被静默丢弃
var(--x) 在 IE11 及更早版本中不是“不支持”，而是语法错误 —— 浏览器直接跳过整条声明，不会尝试解析括号里的后备值。
- 写法必须是先静态值、后
var()，例如：color: #333; color: var(--text-color, #333); -
var(--x, #fff)在 IE 中完全无效，它连var()函数都不认识 -
@supports (color: var(--_))是唯一可靠检测方式，但仅对支持变量的浏览器生效；IE 连@supports本身都不支持 - PostCSS 插件如
postcss-custom-properties只能替换同一文件内已定义的静态变量，JS 动态设置的document.documentElement.style.setProperty('--x', 'red')它处理不了
最易被忽略的是：Sass 编译器看不到运行时环境，也读不到 JS 设置的 CSS 变量；所有兼容性决策必须在构建前由人明确指定，而不是幻想它能自动探测或响应。
