原生 CSS 嵌套必须使用 @nest 规则且语法严格：& 仅在 @nest 内部开头合法，不支持属性嵌套、多层 @nest 或 Sass 式自由组合，仅现代浏览器支持，非预处理而是运行时特性。
& 在原生 CSS 里根本不能用，浏览器直接报错；只有加了 @nest 规则、且写法严格符合规范时，嵌套才可能生效。
原生 CSS 嵌套必须显式声明 @nest
原生 CSS 不像 Sass 那样默认支持嵌套。你不能直接写：.card { .title { font-size: 1.2em; } }
这会被当作无效语法，浏览器忽略整条规则。
正确写法必须带 @nest，例如：.card { @nest .title { font-size: 1.2em; } }
常见错误包括：
• 忘写 @nest，以为有 & 就能用
• 把 & 放在 @nest 外面（如 & .title），这是非法的
• 在 @nest 内部漏掉空格（@nest.title 错，@nest .title 对）
& 只能在 @nest 内部合法使用
& 在原生 CSS 中不是“父选择器占位符”，而是仅限于 @nest 块内、且必须紧贴开头的特殊符号：
• @nest &.active ✅ 合法，等价于 .card.active
• @nest .active & ❌ 非法，& 不能出现在选择器中间或末尾
• @nest & > span ✅ 合法，生成 .card > span
• @nest &::before ✅ 合法，但注意伪元素必须紧跟 &，不能有空格
它不支持 Sass 那种自由组合，比如 &:hover &::after 在原生中无法表达
原生嵌套不支持属性嵌套和多层 @nest
Sass 允许：margin: { top: 10px; bottom: 5px; }
原生 CSS 完全不识别这种写法，会直接解析失败。
同样，Sass 支持无限层级嵌套：.a { .b { .c { .d { color: red; } } } }
原生 CSS 要求所有嵌套都扁平展开，不允许嵌套 @nest 块：
• @nest & ul { @nest & li { … } } ❌ 语法错误
• 必须写成：@nest & ul li { … } ✅ 单层 @nest，路径写全
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
兼容性与构建流程完全不同
原生 CSS 嵌套是运行时特性，依赖浏览器实现：
• Chrome 119+、Safari 17.4+、Firefox 125+ 才支持 @nest
• 旧版浏览器（包括大部分 IE 和早期 Edge）完全无视，也不报错，只是静默失效
Sass 是构建时预处理：
• 所有嵌套都在编译阶段转成标准 CSS，输出结果兼容任意浏览器
• 但需要额外配置构建工具（如 vite-plugin-sass、sass-loader）
• 缺点是调试时看到的是编译后代码，源码行号对不上
所以：要兼容老环境，必须用 Sass；只面向现代浏览器且想免构建，才考虑原生嵌套
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是——@nest 不是“让 CSS 支持嵌套”，而是“定义一条受限的、显式的嵌套规则”。它没有继承 Sass 的语义习惯，也不提供变量、mixin 或逻辑控制。把它当预处理器用，一定会踩坑。 
