CSS自定义属性必须定义在选择器内，如:root{--color:#007bff;}，值支持颜色、长度等，调用需var(--name)且作用域可见，calc()中需单位一致，JS读写需getPropertyValue和setProperty。
怎么定义一个可用的 CSS 自变量
CSS 自定义属性（即 --xxx）必须写在选择器作用域内，不能独立存在。浏览器遇到孤立的 --color: red; 会直接忽略，不报错也不生效。
- 定义必须带前缀
--，比如--primary-color，不加会当成普通属性被丢弃 - 推荐定义在
:root伪类里，这样全局可访问：:root { --primary-color: #007bff; } - 也可以局部定义，比如只在
.card内生效：.card { --shadow: 0 2px 4px rgba(0,0,0,0.1); } - 值支持几乎所有 CSS 合法值：颜色、长度、数字、
calc()表达式，甚至另一个var()
注意：定义时不能用 var(--xxx) 引用自身，否则计算结果为无效值（initial），且不会触发级联重算。
调用 var() 时为什么没生效
最常见的失效原因是作用域不可见或语法写错。不是所有地方都能用 var()，它只在声明了对应自定义属性的作用域里有效。
- 必须用
var(--name)调用，漏掉括号或写成--name都是无效 CSS - 如果父元素没定义
--text-size，子元素直接写font-size: var(--text-size);，该属性会被整个丢弃（不是回退到默认值） - 支持提供 fallback 值：
color: var(--text-color, #333);，但 fallback 只能是单个值，不能是另一个var()或表达式 - 不支持在
@keyframes或@media查询条件中定义自定义属性（但可以在其中使用已定义的）
常见错误现象：background: var(--bg); 渲染成透明——大概率是 --bg 根本没定义，或定义在别的作用域里。
立即学习“前端免费学习笔记（深入）”；
var() 在 calc() 里怎么安全混用
var() 和 calc() 能嵌套，但顺序和单位必须严谨，否则整个表达式失效。
- 正确写法：
width: calc(100% - var(--gap) * 2);
（--gap值必须带单位，如12px） - 错误写法：
width: calc(var(--gap) + 10);—— 如果--gap是12px，10没单位，计算中断 - 单位必须一致才能参与运算，
var(--size)是1rem，就不能跟20px直接加减 - fallback 不能用于
calc()内部：calc(var(--x, 10px) + 5px)是非法语法，fallback 只能在var()最外层用
性能上无额外开销，但过度嵌套（如三层以上 var() 套用）可能增加 CSS 引擎解析负担，实际项目中建议控制在两层以内。
JavaScript 动态读写 CSS 自定义属性要注意什么
JS 通过 getComputedStyle() 读、style.setProperty() 写，但行为和直觉有偏差。
- 读取必须用
getComputedStyle(el).getPropertyValue('--color')，不能用el.style.--color（语法错误） - 写入时，
el.style.setProperty('--color', 'red')只影响该元素，不影响其子元素，除非子元素显式继承或重新定义 - 修改
:root的属性要用document.documentElement.style.setProperty() - 所有值都是字符串，即使你设的是数字，读出来也是
"42"，需手动转类型 - 不触发重排，但频繁修改可能触发重绘，尤其涉及动画属性时
容易被忽略的一点：CSS 自定义属性本身不响应式，它的值变了，依赖它的 calc() 或媒体查询不会自动重算——得靠 JS 主动触发或靠属性变更自然触发样式更新。
