SCSS本身不生成兼容代码，降级必须靠构建链路（sass→CSS→postcss+autoprefixer）和手动控制；IE11完全忽略@supports、var()、flex等新语法，所有现代特性需在编译前决定是否输出降级版本，browserslist须明确写“IE >= 11”，且CSS变量fallback必须裸写外层、opacity等需用filter替代。
SCSS 本身不生成兼容代码，降级必须靠构建链路和手动控制；IE11 完全忽略 @supports、var()、flex 新语法，所有现代特性都要在编译前就决定是否输出降级版本。
Autoprefixer 必须在 Sass 编译后介入，且 browserslist 要写死版本
很多人以为在 SCSS 里写 @include flex-center 就能自动兼容 IE，其实只是展开成 display: flex，Autoprefixer 根本没机会加 -ms-flexbox 前缀。
- 构建顺序必须是：
sass → CSS → postcss + autoprefixer → 最终 CSS，错一步前缀就没了 -
browserslist不能写"last 2 versions"，要明确写"IE >= 11"或"IE 11" - 编译后直接打开 .css 文件搜索
-ms-flexbox，而不是看 .scss 源码里有没有前缀
IE11 不支持 CSS 变量，fallback 必须裸写在 :root 外层
var(--primary) 在 IE11 中整条声明被跳过，连带后面的 background-color 都不会生效——它不是“不识别变量”，而是“不认识 var() 这个函数名”，整行作废。
- 正确写法：
color: #4a5568; @supports (color: var(--c)) { color: var(--primary); } - 错误写法：
@supports (color: var(--c)) { color: var(--primary); } color: #4a5568;（Chrome 111 之前可能丢弃第二行） -
@supports (--css: variables)是唯一安全的检测方式，但 IE11 会整块忽略该规则，所以 fallback 必须独立存在
颜色/透明度/圆角等属性需手动绕过 IE 解析限制
IE11 支持 rgba() 和 border-radius，但 IE9–10 对 rgba() 的 alpha 渲染不稳定；IE8 及以下完全不支持，必须用 filter 替代。
-
opacity: 0.6在 IE8 中无效，改用filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60) -
background: rgba(0, 0, 0, 0.6)→ IE8 下必须转为filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000) - Sass 中调用
ie_hex_str(rgba(0,0,0,0.6))，不是#{ie-hex-str(...)}（连字符会导致解析失败） -
border-radius在 IE9+ 可用，但 IE9 不支持多值写法（如border-radius: 4px 8px），需拆成单值
别信 @supports 或 @if feature-exists() 能自动适配 IE
@supports (display: grid) 是标准 CSS 规则，IE11 直接跳过整块；而 @if feature-exists(display: flex) 在 SCSS 编译期根本不存在——Sass 不理解浏览器能力，只认函数名是否存在。
- 所有降级逻辑必须靠手动变量驱动，例如顶层定义
$legacy-support: true - 封装兼容写法到
@mixin中：@mixin flex-center { @if $legacy-support { display: -ms-flexbox; } display: flex; } - 禁止混用新旧选择器，如
.btn:where(.primary)在 IE11 中整条规则被静默丢弃，.btn 样式彻底失效
最易被忽略的一点：IE11 对 @supports 块内嵌套的任何东西都无感知，但它对 display: -ms-flexbox 这类老语法的解析又极其严格——空格、换行、拼写错一个字母，整条声明就消失。降级不是“多写几行”，而是“确保每一行都在它的字典里”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
