原生css嵌套（@nest）仅解决选择器层级书写问题，需显式声明且限制严格；sass嵌套是编译期自由逻辑，可结合变量、mixin等，但生成冗余选择器，二者维度不同。
原生 CSS 嵌套（@nest）不是 Sass 的平替，它只解决“选择器层级书写”这一件事，且限制极多；Sass 嵌套是编译期自由展开的逻辑，能配合变量、@mixin、条件分支一起用，但会生成冗余选择器。两者根本不在同一维度上。
原生 CSS @nest 语法必须带 @nest 关键字
浏览器不会把 article { & h2 { ... } } 当作嵌套——这行代码直接被忽略。必须显式写 @nest 才生效：
article {
@nest & h2 {
font-size: 1.5em;
}
}
常见错误包括：
-
&必须紧贴选择器开头，@nest .active &非法，@nest &.active合法 - 不支持嵌套中再嵌套：
@nest & ul { @nest & li { ... } }会报错 -
@nest只能用于选择器，不能用于声明块（比如不能写@nest & { color: red; }） - 不兼容旧版构建工具：PostCSS 插件如
postcss-nesting默认模拟的是旧草案，和 Chrome 119+ 的实现有差异
Sass 嵌套可自由组合变量与逻辑，但编译后不可逆
Sass 的嵌套本质是字符串拼接 + 作用域查找，所以可以自然混用 $variable、@if、@mixin：
.btn {
$base-padding: 12px;
padding: $base-padding;
<p>@if $theme == 'large' {
padding: $base-padding * 1.5;
}</p><p>&:hover {
background-color: darken($primary-color, 10%);
}
}</p>
但这也带来副作用：
- 嵌套过深（>4 层）会导致选择器权重爆炸，例如
.layout .header .nav .item .link - 漏写
&是高频错误：.btn { div:hover { ... } }编译成.btn div:hover，而非预期的.btn:hover - 所有嵌套最终都扁平化为标准 CSS，调试时看不到原始结构，Source Map 支持也依赖构建配置
& 在原生 CSS 和 Sass 中的行为完全不同
原生 CSS 的 & 只在 @nest 内部有效，且只能代表当前规则的选择器主体；Sass 的 & 是编译期符号，可多次拼接、加前缀、甚至参与插值：
- 原生：
@nest &.active, &.disabled { opacity: 0.6; }✅；@nest & + &❌（不支持兄弟选择器拼接） - Sass：
&--large, &.is-expanded✅；"[data-size="#{$size}"]"✅（插值拼接） - Sass 中
&总是指向最近一层父选择器；原生中它只绑定到@nest所在规则的主选择器，无法跨层引用
构建流程与调试体验差距极大
原生 @nest 是运行时解析，DevTools 中能看到原始嵌套结构（Chrome 119+），但断点调试、hover 查看计算样式时，仍显示展开后的选择器；Sass 则完全依赖 Source Map，一旦配置失效，就只能对着编译后的 CSS 推测源码位置。
更关键的是：原生嵌套不解决变量复用、响应式断点抽象、主题切换这些事——它只管“怎么写选择器”。而 Sass 的嵌套是整套工程能力的一部分，脱离 @use、$map-get、@forward 单谈嵌套，等于只用刀尖削苹果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
