SCSS变量管理主题颜色需确保定义在@import前、按语义分层命名、用!default实现安全覆盖。错误顺序导致报错，耦合色值命名增加换肤成本。
SCSS 变量是管理主题颜色最直接、最可控的方式，但前提是变量定义位置、作用域和引用方式都正确——否则会出现 $primary-color 报错或样式未生效。
变量必须在 @import 前定义，且 import 顺序不能颠倒
SCSS 不支持“先引用后定义”，@import 是同步解析的。如果在 _variables.scss 中定义了 $brand-blue: #2563eb;，但你在它之前就 @import "components/button"，而 button 里用了 background: $brand-blue;，编译会直接报 Undefined variable: "$brand-blue"。
- 所有变量文件（如
_variables.scss）必须放在@import链最顶端 - 推荐结构：
@import "variables"; @import "mixins"; @import "base"; @import "components"; - 避免在
_variables.scss中@import其他文件（易引发循环依赖）
用 !default 实现主题覆盖，而不是重复赋值
想让项目支持多主题（比如 light/dark），不能靠后期重写变量，而要用 !default 做安全兜底。否则第二次赋值会报错 Variable $text-color is already defined。
- 在
_variables.scss中写：$text-color: #1f2937 !default; - 在
_theme-dark.scss中写：$text-color: #f9fafb;（不加!default） - 只要确保
_theme-dark.scss在_variables.scss之后 import，就能覆盖原值 - 注意：只有未被赋过值的变量才会取
!default的值；已赋值则忽略
颜色变量建议按语义分层，而非按色值命名
别用 $blue-500 或 $light-gray 这类描述色值或明暗的变量名——它们耦合了设计系统，换配色方案时要全局替换。应该按用途定义，比如 $color-primary、$color-text-primary。
立即学习“前端免费学习笔记（深入）”；
- 基础层（不变）：
$color-primary,$color-success,$color-warning - 语义层（可变）：
$color-text-primary→ 可映射到$color-primary或$color-gray-900，取决于主题 - 避免在组件中直接写死
color: $blue-600;，应统一走语义变量 - 配合
map-get()和function可进一步解耦（如color("primary", "dark")）
真正难的不是定义变量，而是让整个团队遵守同一套语义层级，并在每次新增颜色需求时判断它该属于哪一层——这决定了后续换肤成本是改 3 行还是改 30 个文件。
