变量命名混乱源于缺乏分层约束与作用域隔离，必须用@use+语义前缀+分层变量结构三者配合；否则改一个$color-primary会导致全站样式意外变更。
直接结论：变量命名混乱不是起名能力问题，而是缺乏分层约束和作用域隔离——必须用 @use + 语义前缀 + 分层变量结构三者配合，否则改一个$color-primary，全站按钮、标题、边框都会意外变色。
为什么$red-500这类命名一改就崩
这类名字把物理色值和用途绑死了。品牌升级要换主色？得搜$blue-600、$indigo-700、$primary-blue……三个不同写法可能指向同一处逻辑。更糟的是，深色模式下$text-light在暗背景里反而变成看不见的白。
真正该暴露的是“它在哪用”，而不是“它看起来像什么”：
-
--color-text-primary（用于正文标题） -
--color-border-subtle（用于卡片分隔线） -
--color-bg-surface（用于弹窗浮层底色）
这些名字不依赖视觉判断，换肤、适配高对比度、做灰度模式时，只需改变量值，所有引用自动生效。
立即学习“前端免费学习笔记（深入）”；
如何用@use避免$color-primary被覆盖却不报错
Sass 不会警告“同名变量已存在”，它只会静默用后定义的覆盖前定义的。你在一个文件里写了$color-primary: #007bff;，另一个文件里写了$color-primary: #2563eb;，最终编译结果取决于加载顺序，而这个顺序常由构建工具隐式决定。
修复方式不是靠人盯，而是靠机制：
- 全局禁用
@import，只用@use "colors" as c;，调用时强制写c.$color-primary - 所有变量加模块前缀：
$theme-color-primary（设计系统级）、$btn-bg-primary（组件级），降低重名概率 - 顶层变量一律加
!default：$theme-color-primary: #007bff !default;，后续文件无法直接覆写，除非显式去掉!default - VS Code 安装 Sass IntelliSense 插件，悬停
$color-primary能立刻跳转到定义处，快速定位冲突源头
怎样让 Sass 变量和 CSS 自定义属性保持同步
很多人想“一套变量管到底”，但 Sass 变量编译后就没了，JS 和媒体查询拿不到；CSS 自定义属性运行时可用，却没法在 Sass 里做类型推导或编译期校验。二者本质不互通。
务实做法是明确分工：
- Sass 变量（如
$z-modal-overlay: 1000;）只用于编译期样式生成，配合@use做层级约束，留间隙、禁魔法数 - CSS 自定义属性（如
--color-text-primary）只用于运行时动态场景：深色模式切换、用户主题选择、JS 动态控制显隐 - 两者值需手动对齐，例如在
:root里写--z-modal-overlay: #{$z-modal-overlay};，确保 JS 读取getComputedStyle(document.documentElement).getPropertyValue('--z-modal-overlay')得到的值和 CSS 中一致
最易忽略的是：别在同一个项目里混用$z-modal和var(--z-modal)，这会导致维护断裂——Sass 文件改了，CSS 变量没更新，JS 层逻辑就失效。
