在 sass 中通过 _theme.scss 文件用 !default 声明语义化配色变量（如 $color-brand-primary: #4a6fa5 !default;），统一管理、禁止硬编码；借助 css 自定义属性实现暗色模式切换，sass 仅负责生成初始值。
怎么在 Sass 中定义可复用的配色变量
直接用 $primary-color: #4a6fa5 这类声明，但必须统一放在一个文件里，且所有颜色值都得是变量——不是写死在组件里。Sass 变量只在编译时生效，运行时无法动态切换，所以别指望它替代 CSS 自定义属性。
- 所有颜色变量命名要带语义，比如
$color-brand-primary而不是$blue-500（后者容易和设计系统断开） - 避免用「深灰」「浅灰」这种模糊词，改用功能描述：
$color-text-secondary、$color-bg-surface - 在
_theme.scss里用!default声明，方便下游项目覆盖：$color-brand-primary: #4a6fa5 !default;
为什么 _theme.scss 要用下划线前缀 + .scss 后缀
这是 Sass 的模块导入约定：带下划线的文件不会被单独编译成 CSS，只作为 @use 或 @import 的源。如果你命名为 theme.scss，构建工具可能误生成空的 theme.css 文件。
- 文件路径建议放
src/styles/_theme.scss，和_mixins.scss、_variables.scss平级 - 在入口
main.scss中用@use 'styles/theme' as theme;，之后通过theme.$color-brand-primary访问 - 不要用
@import（已废弃），它会污染全局作用域，导致变量冲突
如何让主题变量适配暗色模式切换
Sass 变量本身不能响应式切换，真要支持亮/暗主题，得靠 CSS 自定义属性中转。Sass 负责生成初始值，CSS 变量负责运行时控制。
- 在
_theme.scss里定义两套变量：$color-bg-light: #ffffff和$color-bg-dark: #121212 - 然后在
:root和[data-theme="dark"]里用--bg-color: #fff和--bg-color: #121212声明 CSS 变量 - 组件中用
background-color: var(--bg-color)，而不是直接引用 Sass 变量 - 别试图用
@media (prefers-color-scheme: dark)直接覆盖 Sass 变量——它不生效
常见报错：Undefined variable 怎么快速定位
绝大多数是因为路径错、拼写错，或 @use 顺序不对。Sass 不允许在变量声明前使用它，也不允许跨模块未声明就引用。
- 检查
@use是否写在文件最顶部，前面不能有空行或注释 - 确认路径正确：比如
@use '../styles/theme'，注意相对路径从当前文件出发 - 变量名大小写敏感，
$ColorBrandPrimary和$color-brand-primary是两个变量 - 如果用了
@forward暴露变量，确保目标文件里没漏掉as *或具体名称列表
$button-primary 变量里，结果换肤时得重写所有组件样式。配色变量应该按「用途」而非「UI 元素」拆分，哪怕多写几行，也比后期维护时猜颜色含义强。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
