postcss-nested支持Sass风格隐式嵌套（如.card { .title { color: red; } }），不依赖@nest，仅处理选择器嵌套；而postcss-nesting只认@nest &语法，混用会导致编译失败或静默跳过。
用 postcss-nested 而不是 postcss-nesting
要写类似 Sass 那种不用 @nest、直接缩进嵌套的语法（比如 .card { .title { color: red; } }），必须用 postcss-nested，不是 postcss-nesting。后者只认 @nest & .title 这种显式写法，混用会编译失败或静默跳过嵌套规则。
常见错误现象包括：TypeError: Cannot read property 'type' of undefined，或者样式完全没展开，输出 CSS 里还留着嵌套结构。
-
postcss-nested已归档、不维护，但仍是目前唯一支持隐式嵌套（即 Sass 风格）的 PostCSS 插件 - 它不依赖
@nest关键字，解析逻辑更接近 Sass 的 AST 行为 - 安装命令是
npm install postcss-nested --save-dev，别装错成postcss-nesting
配置顺序必须在 autoprefixer 之前
PostCSS 插件执行顺序影响结果：嵌套必须在加前缀、压缩等步骤之前处理，否则 .btn:hover 这类生成的选择器可能拿不到正确前缀。
典型 postcss.config.js 正确顺序：
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-nested'), // 必须放这里
require('autoprefixer'),
require('cssnano')
]
}
- 如果把
postcss-nested放在autoprefixer后面，&:hover展开后不会被补全-webkit-等前缀 - 搭配
postcss-import时，嵌套支持多层@import，但深度超过 3 层会导致构建变慢（实测 +10% 耗时）
注意它不支持属性嵌套（如 font: { size: 14px; }）
postcss-nested 只处理选择器嵌套，不解析声明块内的嵌套写法。这和 Sass 不同——Sass 支持 font: { size: 14px; weight: bold; }，但 postcss-nested 遇到这种会直接忽略或报错。
- 合法写法：
.card { h2 { color: red; } } - 非法写法：
.card { font: { size: 14px; } }→ 编译失败或原样输出 - 如需属性嵌套，得换用预处理器（Sass/Less）或改用
precss（但它也已不活跃） - 变量作用域也有坑：嵌套块内无法直接访问
:root定义的--color，得显式写var(--color)
浏览器兼容性与上线前必须检查的点
即使用了 postcss-nested，生成的 CSS 仍需考虑目标浏览器是否支持你写的伪类、自定义属性等。插件只负责展开嵌套，不降级其他特性。
- 例如
.card { &:has(> img) { border: 1px solid; } }会被展开为.card:has(> img)，但 IE 和旧版 Safari 不支持:has()，得手动删或替换 - 媒体查询嵌套（
@media (min-width: 768px) { .card { ... } }）能正常展开，但@container这类新语法不被识别 - 上线前建议 grep 检查输出 CSS 中是否残留
&符号——有就说明嵌套没生效，大概率是插件没加载或配置顺序错了
嵌套层级本身没有硬限制，但三层以上容易让选择器特异性失控，且调试时很难定位来源；真正难搞的是插件边界——它只做一件事：把缩进结构转成空格分隔的选择器链，其余都得靠你手动兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
