sass嵌套不提升优先级，但易生成高权重选择器；关键在意识嵌套生成的css结构。&代表上层完整选择器字符串，空格决定后代或拼接，@at-root(with:media)防权重抬升，%占位符替代深层继承降权。
直接说结论：Sass嵌套本身不提升优先级，但会无意中生成高权重选择器；优化关键不是“怎么嵌套”，而是“嵌套时是否意识到它在拼什么CSS”。
为什么嵌套越多，.card__header越难被覆盖
嵌套只是语法糖，编译后就是纯CSS选择器。比如 .card { &__header { color: #333; } } 编译为 .card__header（权重10），但若写成 .card { .card__header { color: #333; } }，就变成 .card .card__header（权重20）——多了一个后代关系，权重翻倍。
- 常见错误现象：改一个子元素颜色，发现加了
!important才生效，其实是因为父级嵌套里重复写了类名，悄悄把权重拉高了 - 真正可控的方式是让嵌套结构反映语义，而不是靠多写一层来“确保生效”
- 用 VS Code 的 Ctrl+Click 跳转到编译后的 CSS，直接看生成的选择器，比猜更准
& 在嵌套里到底代表谁
& 不是“当前视觉缩进的父级”，而是“上一层完整选择器字符串”。它容易被误读，导致权重失控。
- 正确：
.btn { &--primary { color: blue; } }→.btn--primary（权重10） - 错误：
.btn { .icon { &--small { } } }→.icon--small（&指向.icon，不是.btn） - 检查点：& 前有没有空格？有空格就是后代选择器，没空格才是拼接
- 想保留外层上下文？用变量暂存：
$block: ".card"; #{$block}__title { }
用 @at-root (with: media) 防止媒体查询抬高权重
在嵌套里写 @media，默认会把整个规则包进去，比如 .btn:hover { @media (max-width: 768px) { color: red; } } 编译为 @media { .btn:hover { color: red; } } —— 这个选择器权重比单独的 .btn:hover 高，且无法被同级样式覆盖。
- 正确写法：
.btn:hover { @at-root (with: media) { @media (max-width: 768px) { color: red; } } }→ 生成平级的.btn:hover {} @media { .btn:hover {} } - 裸
@at-root会把整个块提到最外层，可能丢失&上下文，甚至让.card__header变成孤立类名 -
with:后只能跟media、rule、all，不能写screen或query
用 %placeholder 替代深层继承，避免选择器爆炸
% 占位符不输出 CSS，只在 @extend 时合并声明，能避免重复类名堆叠带来的权重膨胀。
- 错误示范：
.list .item .badge { @extend %flex-center; }→ 编译出.list .item .badge { display: flex; }（权重30） - 正确做法：
.list__item--with-badge { @extend %flex-center; }→ 权重仅10，且语义明确 -
%不能写在@media块内，也不能带伪类（如%btn:hover报错） - 需要动态值？换
@mixin，@extend不支持传参
真正难的不是写对嵌套语法，而是每次敲下 & 或缩进前，心里清楚它会编译成什么选择器、权重多少、是否还能被外部合理覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
