SCSS无法检测浏览器能力，降级只能靠编译期变量或@supports运行时判断；必须分离现代与旧版样式、保持选择器权重一致，且IE11的-ms-grid需手动实现。
SCSS本身不检测浏览器能力，降级必须靠编译期变量或运行时配合
SCSS是编译时预处理器，@if、feature-exists()这些指令只在编译阶段起作用，完全无法感知目标浏览器是否支持display: grid或gap。你写@if feature-exists(display: grid)，SCSS会直接报错——它根本不认识这种语法；写@if str-index($css, 'grid')也只是字符串匹配，和实际渲染能力毫无关系。
真正可行的路径只有两条：
- 用顶层布尔变量（如
$legacy-support: true）控制整套输出：编译时决定是否生成-ms-flexbox、-ms-grid-column等IE专用规则 - 把现代样式写进
@supports块，由浏览器运行时解析；SCSS只负责组织结构，不参与判断 - 绝不能混用：比如在同一选择器里既写
display: flex又写display: -ms-grid，IE11会取后者但计算逻辑错乱，子项定位全崩
@supports块必须裸写在CSS层，SCSS只能封装结构
@supports是CSS原生规则，浏览器解析CSS时才执行。SCSS能做的只是把它当普通CSS字符串输出，或者用@mixin封装常用检测模式，比如：
@mixin supports-grid {
@supports (display: grid) {
@content;
}
}
但要注意：
- 这个mixin不会让IE11“跳过”或“执行降级”，它只是把
@supports块原样吐出去——IE11直接忽略整块，现代浏览器才生效 - 所有降级样式（如
float布局、margin模拟gap）必须写在@supports块外部，且位于其上方，否则旧浏览器拿不到任何样式 - 不要嵌套
@supports not，Safari 14之前会崩溃解析；更别用@supports not (display: grid) { display: flex; }——IE里这条根本不会触发
变量与函数降级不能靠@supports检测，得用JS或类名切换
CSS变量（--primary）、color-mix()、oklch()这类特性，@supports检测极不可靠。比如@supports (color: oklch(0% 0 0))在2026年仍有不少浏览器返回false；而@supports (color: lch(0% 0 0))已稳定可用。
更麻烦的是CSS变量本身：@supports (--foo: red)在Safari ≤13.1中失效，但CSS.supports('color', 'var(--primary)')在JS层更准。所以实际方案是：
- 先写fallback：
background-color: #4a5568;（不能是oklch()或带透明度的hex） - 再用
@supports包裹增强：@supports (color: oklch(0% 0 0)) { background-color: oklch(60% 0.2 240); } - 对变量依赖强的场景（如主题系统），改用HTML类名控制：
html.no-cssvars .btn { background: #007bff; }，JS检测失败时加no-cssvars类
autoprefixer不再救IE，-ms-grid必须手写或弃用
autoprefixer v9+已彻底移除对-ms-grid的支持。你写grid-template-columns: 1fr 2fr，它不会自动转成-ms-grid-columns: 1fr 2fr，更不会帮你给每个子项加-ms-grid-row和-ms-grid-column——IE11的-ms-grid是纯手动二维定位模型，和现代Grid语义完全不同。
如果真要支持IE11：
- 用SCSS变量开关控制是否生成整套
-ms-grid代码，比如$ie11-grid: true - 每个网格项的位置都得手写
-ms-grid-row/-ms-grid-column，不能靠grid-area推导 - 更现实的方案是放弃IE11 Grid，用Flex +
margin+:nth-child模拟基础栅格，把@supports (display: grid)纯粹当增强层用
最易被忽略的一点：所有降级方案的前提是——现代样式和降级样式必须使用完全相同的选择器权重。哪怕只是多套一层.legacy类，老浏览器就可能被更高权重的全局规则覆盖掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
