在sass中定义主题色需在_variables.scss中用$color-primary: #4a6fa5;声明，通过@import 'variables';引入（不可用@use），变量名带语义前缀、优先用十六进制；深色模式需预编译两套css并用@if分支控制，不可依赖运行时css变量；硬编码色值会导致主题失效，须全面替换为变量引用。
怎么在Sass里定义和引用主题色变量
直接在 _variables.scss 里用 $primary-color: #4a6fa5; 这种语法声明，然后在其他文件里 @import 'variables'; 就能用。注意必须是 @import（Sass旧语法），不是 CSS 原生的 @use——后者会隔离变量作用域，引用不到。
常见错误现象：Undefined variable "$primary-color"，八成是漏了 @import，或者 import 顺序错了（变量文件得放在最前面）。
- 变量名建议带语义前缀，比如
$color-primary而不是$blue，避免后期换色时要全局搜替换 - 颜色值优先用十六进制或 rgba()，少用命名色（
red、lightblue），后者在不同浏览器渲染不一致 - 如果项目已用
@use，得改用@forward暴露变量，或统一迁移到模块系统（但要注意旧版 Sass 不支持）
Sass变量如何适配深色/浅色主题切换
不能靠 JS 动态改 CSS 变量去驱动 Sass 变量——Sass 是编译时处理的，运行时无效。真正可行的是预编译两套 CSS：一套基于 $theme: 'light'，一套基于 $theme: 'dark'，再用 @if 分支控制输出。
使用场景：需要服务端渲染或静态站点生成（如 Gatsby、Hugo），且主题切换不依赖用户实时操作。
- 把主题逻辑抽成 mixin，比如
@mixin theme-colors() { @if $theme == 'dark' { ... } }，再在根文件里调用 - 别用
!default在多个文件里反复覆盖变量，容易导致编译结果不可预测 - 深色模式下慎用
lighten()/darken()函数，它们基于 HSL 计算，在低饱和度颜色上会失真（比如lighten(#111, 20%)可能变成灰紫）
为什么 $color-primary 改了但按钮没变色
大概率是颜色被硬编码覆盖了：比如按钮样式里写了 background-color: #4a6fa5;，而不是 background-color: $color-primary;。Sass 变量不会自动“绑定”到已有值，改变量只影响后续编译。
性能影响几乎为零，但维护成本高——一旦漏改某处硬编码，主题就出现断裂点。
- 用 VS Code 插件 “Polacode” 或正则
#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})扫描项目，揪出所有残留色值 - 组件库（如 Bootstrap Sass 版）的变量通常有命名规范，比如
$btn-primary-bg，优先复用而非重写 - CI 流程里加一步检查：编译后 CSS 文件中十六进制色值数量是否低于阈值（比如
和 CSS 自定义属性（--primary-color）混用要注意什么
可以共存，但分工要清楚：Sass 变量管编译期逻辑（比如生成暗色系 class、计算间距比例），CSS 变量管运行时动态主题（比如用户点击切换）。两者不能互相赋值：--primary-color: #{$color-primary} 是合法的，但 $color-primary: var(--primary-color) 会报错——Sass 读不到运行时变量。
容易踩的坑：在媒体查询里用 @media (prefers-color-scheme: dark) 直接设 CSS 变量，却忘了 Sass 层没做对应适配，导致组件内联样式（如 style="color: $text-color"）仍按亮色输出。
- 推荐分层：Sass 生成基础主题类（
.theme-light/.theme-dark），CSS 变量负责微调（如滚动条颜色） - 不要在 Sass 中用
#{}插值拼 CSS 变量名，比如var(--#{$prefix}-color)，这会让压缩工具误判为字符串而保留空格 - 如果用 PostCSS 处理 CSS 变量，确保它在 Sass 编译之后执行，否则
var(--primary-color)会被当成普通文本原样输出
变量本身很简单，难的是让整个团队在写新组件时条件反射去查 _variables.scss，而不是随手敲个 #007bff。最隐蔽的问题往往不在代码里，而在 PR Review 时没人看这一行是不是又手写了颜色值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
