嵌套过深反而加剧覆盖问题，因其生成冗余长链选择器（如.page .section .content .item .title），虽不提升权重却导致devtools难定位、dom挪动即失效、后续覆盖被迫依赖!important；sass官方建议不超过3层，超4个连续class即需重构，应改用bem拼接、变量暂存$block或@layer分层管理。
为什么嵌套过深反而加剧覆盖问题
嵌套本身不提升选择器权重，但会生成冗余长链，比如 .page .section .content .item .title 编译后是 5 个 class 的后代选择器。这种写法看似“赢了”优先级，实则埋雷：DevTools 里难定位、挪动 DOM 就失效、后续想覆盖只能靠 !important 硬顶。Sass 官方明确建议嵌套不超过 3 层；一旦编译后 CSS 出现超过 4 个连续 class（空格分隔），就是失控信号。
用 stylelint-config-sass-guidelines 配置 max-nesting-depth: 3 可自动拦截。不是限制你写，而是提醒你该重构语义了——比如把深层结构拆成独立组件，或改用 BEM 拼接。
如何用 & 正确拼出作用域类名
& 不代表“上一层缩进”，它精确指向最近的父选择器字符串。写错一个空格，结果就全偏：.card { .header { &__title { } } } 生成的是 .header__title，不是你要的 .card__title。
- 要拼外层上下文？用变量暂存：
$block: ".card"; #{$block} { #{$block}__title { } } -
&前不能有空格，否则变成后代选择器；没空格才是直接拼接 - BEM 场景下必须依赖
&，否则命名断裂会导致样式丢失——这不是 bug，是 Sass 的设计机制
用 @layer 替代 !important 控制覆盖顺序
@layer 是 CSS 原生方案，比 !important 更可控。它不破坏层叠逻辑，只是提前划好“地盘”：@layer base, theme, overrides; 之后所有 @layer theme { } 规则天然高于 @layer base。
第三方库样式建议放入 @layer vendor，自己业务样式放 @layer app。注意检查最终输出的 CSS 是否保留了 @layer 声明（搜索文件确认），老构建工具可能直接丢弃它。
在 Sass 中，@use "sass:meta" 不影响 @layer 输出，但需确保编译目标 CSS 版本 ≥ 2021 年标准。
变量重名导致的静默覆盖怎么防
SCSS 变量重名不会报错，后声明的直接覆盖前声明的——改一个 $spacing-xs，所有用到它的组件间距全变，却查不到源头。
唯一可控方式是 @use + !default：
- 基础变量必须带
!default：$color-primary: #3b82f6 !default; - 下游想覆盖，得在
@use前声明：$color-primary: #dc2626;，再@use "theme" - 别在
@use后再赋值$color-primary，那只会污染当前文件，不传给模块 - 第三方库（如 Bootstrap）要确认它已发布 module 版本，否则仍得用
@import，风险更高
真正容易被忽略的是：很多团队把 $font-size-base 这类变量塞进全局 _settings.scss，结果一个组件要 14px，另一个要 16px，最后只能靠 !important ——不如按组件域封装变量，用 @use "card" with ($font-size: 16px) 显式传入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
