<p>在 :root 中定义 --brand-primary 等品牌色变量最稳妥，需带 # 前缀、用小写十六进制，确保声明早于使用；深色模式通过 @media (prefers-color-scheme: dark) 重设同一变量；var() fallback 不支持单位和嵌套 var()。</p>
怎么在CSS里定义一个可复用的品牌色变量
直接在 :root 里声明 --brand-primary 这类自定义属性，是最稳妥的起点。它不依赖具体元素，全局可用，也方便后续被 JS 读取或动态替换。
- 别写在某个 class 或组件内部——那样作用域受限，其他地方用不了
- 十六进制值必须带
#，比如#2563eb，写成2563eb会被忽略 - 推荐用小写字母，避免大小写混用导致维护混乱（
#2563EB和#2563eb在某些旧浏览器里可能被当作不同值）
为什么不能直接在 class 里写 color: var(--brand-primary) 却没效果
常见原因是变量没定义，或者定义位置不对。CSS 变量是“就近生效”的：如果 :root 没声明，子元素里再怎么 var(--x) 都会退回到默认值（通常是 inherit 或初始值）。
- 检查控制台是否报
Invalid property value—— 很可能是变量名拼错了，比如--brand-prmiary - 确保声明在使用之前，尤其在多个 CSS 文件时，
:root块要加载早于引用它的样式表 - 注意继承性：CSS 变量默认可继承，但如果你在某个父元素上重写了
--brand-primary，子元素会拿到新值，未必是你想要的
如何让品牌色适配深色模式自动切换
靠 @media (prefers-color-scheme: dark) 重新赋值变量即可，不用改 HTML 或 JS。这是目前最轻量、最兼容的方案。
- 在
:root里先定义亮色模式值，再在媒体查询里覆盖同一变量名 - 不要用
color-scheme: dark来触发——它只影响表单控件和滚动条，不触发变量重算 - 如果用了 CSS-in-JS 或构建工具（如 PostCSS），注意它们可能提前编译掉媒体查询，导致变量未生效
:root {
--brand-primary: #3b82f6;
}
@media (prefers-color-scheme: dark) {
:root {
--brand-primary: #60a5fa;
}
}
用 var() 时哪些参数容易出错
var() 支持 fallback，但写法很敏感：第二个参数不能带单位或括号，也不能嵌套另一个 var()（除非用 calc() 包一层）。
立即学习“前端免费学习笔记（深入）”；
- 正确 fallback：
color: var(--brand-primary, #3b82f6) - 错误写法：
var(--brand-primary, #3b82f6px)（单位不能放 fallback 里） - 错误写法：
var(--brand-primary, var(--fallback))（不支持嵌套，会当字符串处理） - 想链式 fallback？得用
calc(var(--a) + 0px)这种 trick，但代价是失去类型校验，慎用
--brand，看变量值有没有被解析出来，比猜快得多。 
