scss变量重名会静默覆盖，因编译期静态绑定且无冲突提示；唯一可控方案是@use配合!default，显式控制覆盖时机与范围，并按模块封装非全局变量。
SCSS变量重名不会报错，但会导致编译时值被后定义的覆盖，且毫无提示——你改了一个$spacing-xs，结果所有用到它的组件间距全变了，却查不到源头。
为什么$xxx重名会静默覆盖
SCSS变量是编译期静态绑定，同名变量在同一个作用域内，后声明的直接覆盖前声明的。它不像JavaScript的const会报错，也不像CSS变量有层叠机制可调试。
- 多个
@use模块中都定义了$color-primary，最终生效的是最后被@use的那个 -
@import（已废弃）更危险：所有@import文件拼成一个全局作用域，谁在后面写，谁就赢 - 变量没加
!default时，第二次赋值就是强制覆盖，不是“跳过”
@use + !default 是唯一可控组合
只靠@use还不够——它隔离了命名空间，但如果你在模块里直接写$color-primary: #3b82f6;，下游@use它时依然可能被本地同名变量覆盖。
- 基础变量必须带
!default：$color-primary: #3b82f6 !default; - 下游想覆盖，得在
@use前声明：$color-primary: #dc2626;，再@use "theme" - 不要在
@use之后再赋值$color-primary，那只会污染当前文件，不传给模块 - 第三方库（如
sass:map）也建议@use "sass:map" as map，避免和项目内map-get()冲突
别让@forward变成变量泄露通道
@forward本意是“有选择地透出”，但若配置不当，等于把模块内部变量全倒出来，立刻回到@import时代的污染状态。
- 禁用裸
@forward "vars"——它会把所有变量、mixin、函数无差别暴露 - 必须显式
show或hide：@forward "vars" show $radius-sm, $z-index-overlay; - 加
as prefix-彻底解耦：@forward "vars" as theme-→ 下游只能用theme-$radius-sm - 如果转发了
$private-token又没hide，它就会和项目其他$private-token撞车
真正难的不是防重名，而是识别“不该共用”的变量
很多团队把$font-size-base、$border-radius全塞进_settings.scss，以为统一就好——结果一个组件想用圆角4px，另一个要8px，只能靠!important硬顶，权重失控。
变量是否该全局，取决于它是否真“跨所有上下文一致”。字体大小、断点、z-index层级可以全局；但卡片圆角、按钮阴影、表单边距，应按模块封装，用@use "card" with ($radius: 6px)传参控制。否则，重名只是表象，设计意图混乱才是根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
