scss的@if无法检测浏览器对css grid的支持，因feature-exists()仅查函数、str-index仅为字符串匹配；真正可行的是用变量（如$legacy-support）控制编译输出，并配合@supports做运行时增强。
SCSS的@if根本不能检测浏览器是否支持grid
直接写 @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-flex-pack、-ms-grid-column的 IE 兼容代码 -
$legacy-support: false时，只输出现代display: flex和display: grid - 避免每个属性都加
@if，把整套旧语法封装进@mixin grid-fallback或@mixin flex-ie10，调用时干净利落 - 不要混写：同一个选择器里同时写
display: flex和display: -ms-grid，IE11 会按顺序取最后一个，但两套模型计算逻辑冲突，极易错位
@supports 必须和 SCSS 变量配合使用，不能单独依赖
@supports (display: grid) 是运行时判断，IE11 完全忽略它；但现代浏览器会执行它。所以正确结构是：
外层写健壮的 Flex 基础布局（所有浏览器都生效）→ 内层用 @supports 包裹 Grid 增强（仅现代浏览器生效）→ 同时用 SCSS 变量控制是否生成 IE 专用样式表（如 ie11.css）。
- Flex 版本里要手动模拟
gap：用margin+:nth-child或 wrapper 的padding - Grid 块里禁止出现
gap、place-items、subgrid等 IE11 完全不识别的属性，否则即使进了@supports也会静默失效 - 如果项目需同时支持 IE11 和 Safari 9，得额外加一层
@supports (margin-inline-start: 1rem)判断逻辑属性，因为 Safari 9 支持@supports但不支持逻辑方向
别指望 autoprefixer 或 postcss-grid-kiss 自动生成 IE Grid
autoprefixer v9+ 已彻底移除对 -ms-grid 的支持，postcss-grid-kiss 是另一套 DSL 语法，不是自动转换工具。你写的 grid-template-columns: 1fr 2fr 不会变成 -ms-grid-columns: 1fr 2fr，更不会帮你定位每个子项的 -ms-grid-row 和 -ms-grid-column。
- IE11 的
-ms-grid是纯手动二维定位，没有auto-fit、没有gap、没有响应式轨道，必须逐个子项写位置 - 若真要支持 IE11 Grid，建议只用于极简静态布局（比如三栏固定宽），复杂场景直接降级为线性流或
display: table - 用
postcss-flexbugs-fixes补-ms-flex-pack值映射比手写更可靠，但它不处理 Grid
CSS.supports('display', 'grid') 检测，再操作 class —— 这部分和 SCSS 完全无关。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
