原生css嵌套必须用&或@nest显式声明关系，隐式写法（如.card{h2{}}）会被浏览器忽略；&后空格决定后代/复合类，复杂结构需@nest，且@media中&仍引用父选择器。
原生 CSS 嵌套中 & 必须显式声明嵌套关系，不能省略
原生 CSS（即浏览器直接解析的 .css 文件）不支持 Sass 那种隐式嵌套写法。写成 .card { h2 { color: blue; } } 会被整个忽略——浏览器根本不认识这种语法。必须用 & 或 @nest 显式表达层级。
正确写法是：.card { & h2 { color: blue; } }，生成 .card h2；如果漏掉 &，哪怕只少一个字符，样式就完全不生效。
常见错误包括：
-
.card { h2 { ... } }→ 无效，整条规则被丢弃 -
.card { &h2 { ... } }→ 错误，&h2变成.cardh2（无空格），不是后代关系 -
.card { & .header { ... } }→ 多余空格，等价于.card .header，但语义模糊，建议统一用& .header或&.header区分意图
& 构建修饰类时：空格决定是后代还是复合类
& 后加空格，表示后代选择器；不加空格，表示拼接成新类名。这是最易混淆的点，直接影响生成的选择器结构。
比如：
-
.btn { &:hover { ... } }→.btn:hover（伪类，无空格） -
.btn { &.primary { ... } }→.btn.primary（复合类，无空格） -
.btn { & .icon { ... } }→.btn .icon（后代，有空格） -
.btn { &__label { ... } }→.btn__label（BEM 元素，无空格）
注意：&__label 是合法的，但 & __label（带空格）会报错或生成意外的 .btn __label（含多余空格，无效）。
复杂组合必须用 @nest，& 无法覆盖所有场景
当需要匹配 article > header + section 这类带关系符和相邻兄弟的结构时，& 单独无法构造。它只能作为前缀拼接，不能插入中间。
此时必须用 @nest：
article {
@nest & > header + section {
margin-top: 1rem;
}
}
要点：
-
@nest是硬性语法，拼错（如@nestt）或漏写，该块样式彻底消失 -
@nest只能用于选择器上下文，不能放在@media或@supports内部再套一层 -
&在@nest块里仍有效，但必须紧贴开头，例如@nest &.active > span
媒体查询内 & 的行为：引用外部父选择器，不是媒体本身
在 @media 块里写 &__header，生成的是 @media (min-width: 768px) { .component__header { ... } }，不是 .component @media { ... }。
这意味着：
-
&总是回溯到最近的、非 at-rule 的父选择器 - 不能用
&引用另一个@media的条件，比如@media (prefers-color-scheme: dark) { &.inverted { ... } }是合法的，但&仍指向外部类名，不是颜色方案 - 若父选择器本身含
:not()或:is()，拼出的完整选择器可能在旧浏览器中失效（如.x:not(.y):hover在 Safari 15.4 之前不支持）
真正容易被忽略的是：原生嵌套的 & 和预处理器里的 & 行为看似一致，但解析时机不同——前者由浏览器运行时处理，后者由构建工具编译时展开，出错反馈方式、调试路径、兼容性兜底策略都完全不同。别把本地 Sass 编译通过的写法，直接挪进 .css 文件里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
