SCSS嵌套本身不提权，但&展开父选择器时会连带空格和关系符，生成过长后代选择器导致权重飙升；应使用@at-root提级、:where()降权、双类名等语义化方式精准控制作用域。
SCSS嵌套本身不提权，但编译后选择器权重飙升，根本原因是 & 展开父选择器时把空格、关系符一并带上，生成了过长的后代选择器——比如 .form .field .input::placeholder 权重直接到 0-0-1-3，而你本意可能只是给 .input::placeholder 加个颜色。
为什么 & 嵌套会让权重失控
& 不是“当前缩进的父级”，而是上一层完整选择器字符串。一旦父选择器含空格（如 .card > .header），&__title 就会编译成 .card > .header__title，权重从 0-0-1-0 变成 0-0-1-1；更糟的是 .nav li a:hover 这种三层后代，权重 0-0-3-1，远超 a:hover 的 0-0-1-1。
- 常见错误：
.form .field .input { &::placeholder { } }→ 编译为.form .field .input::placeholder - 检查点：看
&前有没有空格——有空格就是后代选择器，没空格才是类名拼接 - DevTools 里会标黄“选择器过长”，Firefox 可能因此触发重排降级
用 @at-root 切断嵌套污染
@at-root 是显式提级指令，不是语法糖。它告诉 Sass：“这段样式逻辑上不属于当前嵌套路径，请输出到顶层”。对工具类、媒体查询响应逻辑、兄弟组件样式特别有效。
- 正确写法：
.modal { @at-root .u-text-center { text-align: center; } }→ 输出.u-text-center，零额外权重 - 带上下文提级：
@at-root (with: .theme-dark) { .button { color: white; } }→ 输出.theme-dark .button - 禁用场景：别在
@media块里用&嵌套，否则外层若有.layout .dashboard，&__body会变成六层选择器
用 :where() 主动归零局部权重
:where() 让括号内选择器权重归零，但必须配合外层有实际权重的选择器才生效。它不是兜底万能药，而是精准控制作用域的手段。
- 安全用法：
:where(.theme-dark) .input { color: white; }→ 权重等同于.input，只限定生效范围 - 危险用法：
:where(.ant-btn-primary)单独使用 → 权重0-0-0-0，连默认样式都盖不住 - 替代方案：双类名（
.input.input--error）、属性选择器（input[data-role="required"]）更可控
为什么 @extend 在嵌套里最危险
@extend 不是复制样式声明，而是把被继承选择器原样拼接到当前嵌套路径末尾。嵌套越深，拼出的选择器就越长、权重越不可控。
- 典型问题：
.card { .header { h1 { @extend %title; } } }→ 可能生成.card .header h1和.card .header .title，后者权重翻倍 - 安全边界：仅限扁平结构，比如
.btn--primary { @extend .btn; }或纯状态类%disabled { opacity: 0.5; } - 推荐替代：
@mixin封装声明块（零新增选择器）、CSS 自定义属性（覆盖只需重设变量）
真正容易被忽略的一点：权重问题从来不是“怎么写得更高”，而是“怎么让样式职责更清晰”。.card__title 必须显式出现在 HTML 中，而不是靠 DOM 结构推导——这既是 BEM 的语义要求，也是切断浏览器匹配路径的性能底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
