CSS自定义属性是以--开头的原生动态变量，需在:root等选择器中定义，用var()读取并支持回退值；可通过JavaScript的setProperty()动态修改，但须注意作用域、拼写、默认值及不支持表达式等常见问题。
什么是CSS自定义属性（CSS变量）
CSS自定义属性是原生支持的动态值机制，以 -- 开头，比如 --primary-color，必须声明在CSS选择器的 style 块或伪类（如 :root）中才能生效。它不是预处理器变量（如Sass的 $color），不会在构建时被替换，而是在运行时实时计算和继承。
如何在 :root 中定义并使用颜色变量
最常用、最推荐的定义位置是 :root，它等价于 html 元素，确保全局可访问。定义后用 var(--name) 函数读取：
:root {
--brand-blue: #2563eb;
--text-muted: #6b7280;
}
<p>.button {
background-color: var(--brand-blue);
color: var(--text-muted);
}-
var()可接受第二个参数作为回退值，例如var(--bg, #fff)，当变量未定义时生效 - 变量名区分大小写：
--Color和--color是两个不同变量 - 不能直接在内联
style属性里“定义”变量（style="--color:red"无效），但可以读取已定义的变量
如何用JavaScript动态修改CSS颜色变量
通过操作 document.documentElement.style 或任意匹配元素的 style，能实时触发样式重绘：
document.documentElement.style.setProperty('--brand-blue', '#1d4ed8');
// 或针对某个组件
const card = document.querySelector('.card');
card.style.setProperty('--border-color', 'rgba(0,0,0,0.1)');- 修改
:root的变量会影响所有依赖它的元素，无需手动更新每个class - 避免频繁调用
setProperty触发重排；批量修改建议用cssText或一次性设置多个属性 - 注意：变量值必须是合法CSS值，比如不能传入
'blue' + i这样的拼接字符串而不加引号（实际需为'blue'或'#00f'）
常见错误：变量未生效的几个典型原因
变量“看起来写了却没效果”，通常卡在这几个地方：
立即学习“前端免费学习笔记（深入）”；
- 变量定义在某个局部选择器里（如
.theme-dark { --text: white; }），但使用处不在其继承链上 → 改用:root或确保父元素匹配 - 拼写不一致：
var(--main-color)对应的是--main-colour→ 浏览器静默失败，无报错 - 在
@media或@supports中覆盖变量时，遗漏了基础定义 → 必须先有默认值，否则媒体查询内var()查不到 - 用
currentColor混淆了变量：它不是变量，而是当前元素的color值，不能被var()读取或赋值
变量本身不支持计算表达式（如 --lighter: calc(var(--base) * 1.2) 在多数浏览器仍不支持），颜色明暗调节得靠 color-mix() 或 HSL 调整——这点容易低估复杂度。
