SCSS的@if无法检测浏览器对Grid的支持，必须用顶层变量控制编译输出。@supports是运行时判断，IE11忽略它，降级样式需写在外层且兼容IE11，动态适配需JS实现。
SCSS的@if根本不能检测浏览器是否支持Grid
别在SCSS里写 @if feature-exists(display: grid) 或 @if str-index($css, "grid") —— 这些全是无效操作。SCSS编译器不解析CSS渲染能力，feature-exists() 只查函数是否存在，str-index 只做字符串匹配，和运行时兼容性毫无关系。你写的 @supports (display: grid) 会被原样输出到CSS里，由浏览器执行；IE11直接忽略整条规则，不会进任何分支。
必须用顶层变量控制编译输出
真正可行的是手动定义一个布尔变量，比如 $legacy-support: true，然后在 mixin 中做静态分支。这不是自动适配，而是构建前就确定目标环境：
-
$legacy-support: true时，输出带-ms-flexbox、-ms-grid-column的 IE 兼容代码 -
$legacy-support: false时，只输出现代display: flex和display: grid - 把整套旧语法封装进
@mixin grid-fallback，避免每个属性都加@if
例如：@mixin grid-center { @if $legacy-support { display: -ms-grid; -ms-grid-column-align: center; } @else { display: grid; justify-items: center; } }
@supports 必须和 SCSS 变量配合使用
@supports 是运行时判断，IE11 完全忽略它；但现代浏览器会执行。所以正确结构是：
立即学习“前端免费学习笔记（深入）”；
- 外层写健壮的 Flex 基础布局（所有浏览器都生效）
- 内层用
@supports (display: grid) and (grid-template-columns: 1fr)包裹 Grid 增强（仅现代浏览器生效） - 同时用 SCSS 变量控制是否生成独立的 IE 专用样式表（如
ie11.css）
注意：Grid 块里禁止出现 gap、place-items、subgrid 等 IE11 完全不识别的属性，否则即使进了 @supports 也会静默失效。
降级样式必须写在@supports外层且语法兼容IE11
IE11 完全忽略 @supports 规则，所以降级样式（如 display: flex 或 float: left）必须写在块外，且属性值得是老浏览器能理解的：
-
gap失效时，改用子项margin-right+box-sizing: border-box模拟，例如.item { margin-right: 1rem; }配合.item:nth-child(3n) { margin-right: 0; } - Flex 多行下
justify-content无效，可用::after { content: ""; flex: auto; }占位模拟 - IE9 及以下不支持
display: flex，得退回float+ 伪元素清除浮动：.grid::after { content: ""; display: block; clear: both; }
最易被忽略的一点：SCSS 的条件能力仅限于构建时决策。如果你需要根据用户实际浏览器动态切换布局，必须用 JS 检测 CSS.supports() 或 UA 字符串，再切换 class —— 这部分完全脱离 SCSS 范畴。
