CSS的var()函数必须配合以--开头的自定义属性使用，需先声明（如:root{--color:#0C66FF}），否则无效；动态修改须用setProperty()而非直接改样式；fallback值参与计算且支持嵌套；与Python的var无关。
var() 函数必须配合 CSS 自定义属性使用
直接写 var(--color) 会报错，浏览器根本不认识这个值——它只认 --color 这种以两个短横线开头的自定义属性。你得先在某个作用域里声明它，比如：
:root { --color: #0C66FF; }
或者某个元素上：
.card { --color: #2a80b9; }
否则 var() 查无此变量，最终 fallback 值（如果有）才生效，没写 fallback 就变成无效声明。
动态改 var 值只能靠 JavaScript 的 setProperty
CSS 本身不能“运行时”改变变量值，所有所谓“动态”，本质是 JS 操作 DOM 的 style 对象。常见错误是试图用 document.querySelector('.x').style.color = 'red' 去覆盖 var(--color) 的效果——这完全无效，因为 color 是最终计算值，不是变量源。真正该改的是变量本身：
-
document.documentElement.style.setProperty('--color', '#ff6b6b')→ 全局生效 -
el.style.setProperty('--bg', 'rgba(0,0,0,0.1)')→ 仅该元素及其后代生效（继承性决定） - 别用
cssText或批量重写style，会清掉其他内联样式
fallback 值不是摆设，它决定降级行为
var(--color, #ccc) 里的 #ccc 不只是“备用色”，它是 CSS 层级中真实参与计算的兜底值。这意味着：
- 如果
--color被设为无效值（如setProperty('--color', 'invalid')），浏览器会忽略该变量并采用 fallback - 如果变量名拼错（
var(--colr)），同样走 fallback，不会报错但样式可能意外失效 - fallback 支持嵌套
var()，比如var(--theme-color, var(--default-color, #000))，但层级别太深，解析开销会上升
tkinter 里没有 var()，别和 Python 的 exec 或 StringVar 混了
看到标题里写“var 怎么使用”，有人会立刻想到 Python 的 exec('var{} = {}'.format(i, i)) 或 tkinter 的 StringVar。这两者和 CSS 的 var() 完全无关：CSS 的 var() 是样式层的值注入机制，不执行代码、不创建变量对象、不触发 Python 解释器。 如果你在写混合项目，务必分清上下文：HTML/CSS/JS 里谈 var(--x)，Python 里谈 StringVar 或字典映射，两者之间需要显式桥接（比如用 JS 把主题色传给后端，再渲染模板），不能指望浏览器自动理解 Python 的 var1 变量。
