Sass变量无运行时作用域保护，后声明同名全局变量会无条件覆盖前值；!default仅在首次赋值时生效，需通过导入顺序、命名空间和@use控制覆盖。
直接结论：Sass变量本身不会“覆盖”CSS，但变量值被错误重写后生成的CSS会覆盖预期样式；真正要抓的是变量值在编译期被谁改了、何时生效的链路。
为什么改了$color-primary，按钮却还是灰色？
这不是CSS层叠问题，而是Sass编译时变量值已不是你认为的那个值。常见现象包括：
- DevTools里看到
color: #666，但源码中$color-primary: #007bff明明写了 - 全局搜索
$color-primary:发现多处赋值，且顺序和你预想的相反 - 用了
!default却仍被覆盖——因为!default只对第一次赋值有效，后续同名赋值无条件覆盖
根本原因：Sass变量是纯编译期文本替换，没有运行时作用域或保护机制。后出现的$var: value语句，不管在哪，都会覆盖之前所有同名声明。
@use和@import混用导致变量“消失”或错乱
这是最隐蔽也最常被忽略的冲突源头。典型表现是：某个变量在A文件里能用，在B文件里报Undefined variable "$primary"，或者值突然变了。
立即学习“前端免费学习笔记（深入）”；
-
@import是全局拼接，所有变量、mixin、函数直接注入全局作用域 -
@use默认私有，必须通过命名空间访问，比如theme.$primary - 两者混用时，Sass会降级为legacy模式，
@use的模块边界失效，变量可能被@import文件意外污染 - 尤其注意Webpack/Vite配置里的
sass-resources-loader或additionalData——它们相当于在每个SCSS文件顶部自动@import，极易造成重复定义
验证方法：在疑似出问题的文件末尾加@debug $color-primary;，看终端输出值是否符合预期。
如何让$spacing-xs这类变量“稳住不被改”？
Sass没有const，但可以用组合策略模拟只读语义：
- 所有基础变量声明都带
!default，例如：$spacing-xs: 4px !default; - 把自定义覆盖逻辑抽成单独文件（如
src/styles/override.scss），并确保它在所有其他SCSS之前@import - 第三方库统一用
@use "xxx" as lib;，调用时写lib.$primary-color，彻底隔离命名空间 - 禁用
@use "vars" as *;——这种全量导入等于变相回到@import污染模式
额外提醒：CSS变量（--spacing-xs）和Sass变量（$spacing-xs）机制完全独立。要把前者设为后者值，必须用插值--spacing-xs: #{$spacing-xs};，直接写--spacing-xs: $spacing-xs;会被静默丢弃。
容易被忽略的“假覆盖”：CSS层叠优先级压过了变量生成结果
有时候变量值没错，CSS也正确生成了，但浏览器渲染仍是旧样式。这时不是Sass问题，而是CSS规则本身没赢：
- 检查是否被
!important压制，或高特异性选择器（如.modal.is-open .btn.primary:hover）覆盖了你生成的.btn { color: $primary; } - 确认DOM结构没变——比如你写了
.card__header，但实际HTML里是<div class="header">，那再对的变量也没用 - 如果是Next.js等框架，注意
.module.scss生成哈希类名，而.scss是全局类名，混用时容易误以为“变量没生效”，其实是类名根本没匹配上
真正关键的调试顺序是：先确认编译输出CSS里变量值是否正确 → 再确认该CSS规则是否被加载 → 最后看浏览器DevTools中该元素最终计算出的样式来源。三步缺一不可。
