原生css嵌套必须显式使用@nest，否则整条规则静默失效；&仅在@nest内部开头合法，不支持属性嵌套、多层@nest或sass式自由组合，且无法替代预处理器的变量、mixin等功能。
原生CSS嵌套必须写 @nest，否则整条规则被忽略
浏览器看到没有 @nest 的嵌套写法（比如 .card { .title { color: red; } }），会直接当作无效语法丢弃，连带整个 .card 块都不生效——不是报错，而是静默失效。这和 Sass 完全不同，Sass 编译阶段就把嵌套转成标准 CSS，输出结果里压根没有嵌套结构。
常见错误包括：
- 漏写
@nest，以为加了&就能用 - 把
&放在@nest外面，例如& .title（非法） -
@nest后面紧贴选择器没空格，比如@nest.title（应为@nest .title）
& 只能在 @nest 内部开头合法使用
& 在原生 CSS 中不是“父选择器占位符”，它只在 @nest 块内、且必须紧贴选择器开头才有效。比如：
-
@nest &.active✅ 等价于.card.active -
@nest & > span✅ 生成.card > span -
@nest &::before✅ 注意不能有空格：& ::before是错的 -
@nest .active &❌&不能出现在中间或末尾
Sass 里 & 可以自由组合：&:hover &::after 是合法的；原生 CSS 不支持这种写法，也没办法表达。
原生嵌套不支持属性嵌套或多层 @nest
像 margin: { top: 10px; bottom: 5px; } 这种属性嵌套，原生 CSS 完全不认识，解析失败。同样，不允许嵌套 @nest 块：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
-
@nest & ul { @nest & li { … } }❌ 语法错误 - 必须写成单层：
@nest & ul li { … }✅ 路径写全
Sass 没这个限制，可以无限嵌套、自由展开，但代价是编译后可能生成过长的选择器链，影响匹配性能。
Vue 项目里优先选 Sass，不是因为语法炫酷
Vue 的 scoped 机制靠 [data-v-xxx] 属性隔离样式。不用嵌套时，你得手动拼：.sidebar[data-v-abc] .menu[data-v-abc] .item[data-v-abc]；而 Sass 嵌套后，编译器自动注入，结构对齐 HTML，改 DOM 就能顺手推样式。
Less 在 Vue 里容易出问题：@import 全局变量常失败，嵌套超过 3 层时还可能丢掉中间的 data-v-xxx；Sass（尤其是 SCSS）和 Vite/Vue 插件链配合更稳，开箱即用。
真正容易被忽略的是：原生 @nest 不是“让 CSS 支持嵌套”，而是“定义一条受限的、显式的嵌套规则”——它不模拟 DOM 结构，也不帮你管理 scoped，更不解决变量、mixin、循环这些事。那些都还得靠预处理器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
