PostCSS-nesting 不支持 @nest 语法，仅识别 & 开头的 Sass 风格嵌套，如 .card { & h2 { color: red; } }；Chrome 119+/Safari 17.4+ 原生支持 @nest，但需禁用所有 PostCSS 嵌套插件直接交由浏览器解析。
PostCSS-nesting 不支持 @nest 语法，别白配了
你写的 @nest & h2 { color: red; } 在 postcss-nesting 里完全不生效——它压根不解析 @nest，也不报错，就当普通选择器原样输出。Chrome 119+、Safari 17.4+ 原生支持 @nest，但必须绕过所有 PostCSS 嵌套插件，直接交给浏览器解析。
想用 Sass 风格嵌套？postcss-nesting 只认 & 开头的写法
它把 .card { & h2 { color: red; } } 展开成 .card h2 { color: red; }，本质是字符串拼接，不校验语义。以下写法会被处理但结果可能意外：
-
&:hover✅（展开为.card:hover） -
&__title✅（展开为.card__title） -
.item &❌（postcss-nesting会拼成.item .card，但原意可能是后代选择器；而原生@nest直接拒绝这种写法）
混用 @nest 和 postcss-nesting 会互相破坏
两者对 & 的理解冲突：一个当占位符，一个当语法关键字。常见现象：
- 你写
.card { @nest & h2 { color: red; } }，postcss-nesting先把&替换成.card，结果变成.card { @nest .card h2 { color: red; } }，浏览器直接忽略整条规则 - DevTools 里看不到 warning，样式就“消失”了，排查时容易卡在错误方向
- Webpack/Vite 中若同时启用多个嵌套插件（如
postcss-nested+postcss-preset-env），顺序错乱会导致嵌套被处理两次或零次
真要兼容老浏览器，只能手动降级或换方案
postcss-preset-env 的 stage: 3 包含 nesting，但它底层仍依赖 postcss-nesting 实现，**不等于支持 @nest**。实际适配建议：
- 目标环境含 IE11 或旧 Safari？放弃嵌套语法，改用 BEM 或 CSS Modules 控制选择器层级
- 只支持 Chrome ≥ 119 / Safari ≥ 17.4？删掉所有嵌套插件，直接写
@nest，确保构建流程不误删@nest块（比如某些 CSS 压缩工具会过滤未知 at-rule） - 需要兼顾开发体验和兼容性？用
postcss-nesting写 Sass 风格，但禁止出现任何@nest字样——连注释里都别写，避免干扰
真正麻烦的不是“怎么转”，而是“转完是否还等价”。@nest 的作用域、嵌套深度限制、与伪类组合规则，和 postcss-nesting 的字符串替换逻辑根本不在一个抽象层上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
