SCSS不改变CSS优先级规则，所谓“提权”实为人为提高特异性；应避免嵌套意外增重、用语义化方式精准控制作用域，而非依赖!important或深层嵌套。
SCSS本身不改变CSS优先级规则，所有“权重提升”都是人为构造更高特异性（specificity）的结果；真正要做的不是“怎么提权”，而是避免嵌套意外拉高权重、用语义化方式精准控制作用域。
为什么 & 嵌套会悄悄把选择器权重拉高
& 不是视觉缩进的父级，而是上层完整选择器字符串的展开。一旦父选择器含空格或关系符（如 .card > .header），& 就会把整个结构带进去，编译后变成 .card > .header__title——权重从 (0,0,1,0) 变成 (0,0,1,1)，多了一个标签选择器，却未必需要。
- 常见错误：
.form .field .input { &::placeholder { color: #999; } }编译为.form .field .input::placeholder，权重 (0,0,1,3)，远超.input::placeholder - DevTools 里会标黄提示“选择器过长”，Firefox 可能因此触发重排降级
- 检查点：& 前有没有空格？有空格就是后代选择器，没空格才是拼接类名
如何用 @at-root 切断嵌套带来的权重污染
嵌套媒体查询或工具类时，默认会把整条规则包进父选择器路径，导致权重虚高且无法被同级样式覆盖。
- 错误写法：
.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; } } }→ 输出平级规则，不继承嵌套上下文 - 裸
@at-root会丢失 &，慎用；with:后只能跟media、rule、all，不能写screen或自定义关键字
替代深层嵌套的三种可控提权方式
真正需要“更高权重”时，应选语义明确、可预测、易维护的方式，而不是堆嵌套或加 !important：
立即学习“前端免费学习笔记（深入）”；
- 双类名组合：
.input.input--error { border-color: #ff4d4f; }，权重 (0,0,2,0)，不依赖 DOM 结构，JS 移除 class 即失效 - 属性选择器：
input[data-role="required"] { border-color: #ff4d4f; }，权重 (0,0,1,1)，适合状态驱动场景，比类选择器更精准 -
:where()降权兜底：:where(.theme-dark) .input { color: white; }，权重等同于.input，只限定作用域，不参与竞争
最容易被忽略的隔离前提：先确认是否真需要提权
很多所谓“权重不够”的问题，其实根源在作用域或加载顺序，而非 specificity 数值本身：
- 打开 DevTools → Computed 面板，看目标属性旁有没有删除线；点右侧箭头查 Specificity 值和来源路径
- 检查是否被
element.style覆盖（权重 1000），!important也压不住，得改 JS 或清掉 style 属性 - 确认 CSS 加载顺序：Vite 中
import './global.scss'写在组件样式前，全局样式天然权重更低；反之则容易反向覆盖 - 第三方库（如 Ant Design）通常暴露 SCSS 变量，重写主题色比硬提权更可持续
提权不是目的，隔离才是。CSS Modules 自动加哈希后缀，Vite 的 scoped 模式靠属性选择器隔离——这些机制本身就在降低对权重操作的依赖。优先用好它们，比手写三层嵌套再加 !important 更可靠。
