在Sass中定义品牌色需先创建\_variables.scss集中声明$primary-color等变量，并在main.scss顶部用@use引入；变量作用域和加载顺序错误是颜色未更新的主因；暗色模式应结合CSS变量实现，Sass仅管理静态设计值。
怎么在Sass里定义品牌色变量并全局复用
直接把颜色值抽成 $primary-color、$secondary-color 这类变量，是 Sass 管理品牌色最基础也最关键的一步。变量必须在所有用到它们的文件之前被引入，否则编译会报 Undefined variable 错误。
实操建议：
- 新建
_variables.scss（下划线前缀表示这是 partial，不会单独编译） - 在里面集中定义：
$primary-color: #3a86ff;<br>$secondary-color: #8338ec;<br>$text-dark: #1d1d1f;<br>$border-light: #e0e0e0;
- 在入口
main.scss顶部用@use 'variables'或@import 'variables'（推荐@use，更安全） - 后续所有组件或页面样式中，直接写
color: variables.$primary-color（@use语法需带命名空间）
Sass变量和CSS自定义属性（CSS Custom Properties）混用行不行
能混，但目的不同：Sass 变量在编译时就被替换成具体值，不支持运行时修改；CSS 自定义属性是浏览器运行时生效的，适合做主题切换。强行把两者当同一套机制用，容易踩坑。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 试图用
var(--primary-color)去接 Sass 变量——不行，Sass 不认识 CSS 变量 - 在
:root里用--primary-color: $primary-color——语法错误，Sass 不允许直接赋值给 CSS 变量名 - 想让深色模式靠 Sass 变量切换——做不到，Sass 编译完就固定了
正确做法是分层：Sass 变量管设计系统静态值（如设计稿里的标准色），CSS 变量管运行时状态（如 prefers-color-scheme 切换）。需要时用 #{} 插值把 Sass 值注入 CSS 变量：
:root {<br> --primary-color: #{$primary-color};<br>}
修改一个Sass变量后，为什么有些颜色没更新
大概率是变量作用域或加载顺序出问题。Sass 的 @use 是模块化导入，每个文件默认有独立作用域；而 @import 是全局合并，容易覆盖或冲突。
排查要点：
- 检查是否多个
_variables.scss文件被重复引入（尤其在第三方库或旧代码里） - 确认你改的是被真正使用的那个文件——比如改了
src/styles/vars.scss，但项目实际@use 'theme/variables' - 如果用了
@use 'variables' as *，会导致命名污染，后面同名变量会被覆盖 - Webpack/Vite 项目里，注意
sassOptions是否配置了additionalData自动注入变量，它可能悄悄覆盖了你的定义
品牌色要支持暗色模式，Sass里怎么组织才不乱
Sass 本身不感知系统主题，所以不能靠条件编译“自动”切色。可靠的做法是用两套变量 + CSS 类控制，或者用 CSS 变量兜底。
推荐结构：
- 定义基础色板：
$primary-light: #3a86ff、$primary-dark: #0a50b8 - 定义语义变量：
$primary-color: $primary-light，并在根节点加 class 控制：.theme-dark {<br> --primary-color: #{$primary-dark};<br>} - 组件中统一用
color: var(--primary-color)，而不是直接写color: $primary-color - 如果坚持全 Sass 实现（比如纯静态站），就写两套 class：
.btn--primary和.btn--primary-dark，分别引用对应变量
最容易被忽略的是：暗色模式不只是换几个背景色，文字对比度、边框灰度、阴影深度都得重新校准——这些没法靠一个 $primary-color 变量推导出来，得单独定义 $text-on-primary、$border-on-dark 这类语义变量。
