CSS变量必须以--开头声明、用var()引用且仅用于属性值；var()只接受两个参数，回退值需带单位或加引号；:root中定义为全局，组件内定义具作用域；JS通过setProperty修改，需注意生效范围；伪元素content中不可直接用var()输出文本。
直接说结论：CSS变量必须用--开头声明，用var()函数引用，且只能在属性值位置使用——它不是JavaScript变量，不能参与逻辑判断或拼接字符串。
var()函数的语法和回退值怎么写才不报错
var()只接受两个参数：变量名（必填）、回退值（可选）。常见错误是把回退值写成带单位的表达式却忘了加引号，或者在calc()里漏掉单位。
- 正确写法：
margin: var(--spacing, 16px)、color: var(--text-color, #333) - 错误写法：
width: var(--size, 100)（缺px单位）、content: var(--label, "Hello")（content属性中var()的回退值必须加引号，但变量本身不能含引号） - 在
calc()中嵌套时，回退值必须带单位：height: calc(var(--base-height, 40px) + 8px)
:root里定义 vs 组件内定义的作用域差异
变量作用域由声明位置决定，不是靠文件或命名空间。写在:root里是全局可用；写在.card里，只有.card及其子元素能继承到——但子元素可以覆盖它。
-
:root { --primary: #007bff; }→ 全局生效，包括::before、::after伪元素 -
.modal { --z-index: 1050; }→ 只有.modal和它的后代能读取--z-index，且.modal .close可以重新设--z-index: 1060来覆盖 - 注意：变量不支持跨 Shadow DOM 自动继承，Web Component 内需显式透传或重定义
JavaScript动态修改var()变量的三种典型场景
用element.style.setProperty()改的是该元素及其后代能读到的值，不是整个文档。想全局生效，得操作document.documentElement。
立即学习“前端免费学习笔记（深入）”；
- 切换主题：
document.documentElement.style.setProperty('--bg-color', '#1a1a1a') - 响应用户偏好：
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { ... }里批量设暗色变量 - 动画过渡陷阱：直接改
var(--opacity)不会触发CSS transition，得配合opacity属性本身做过渡，变量只负责提供数值
伪元素和content里用var()要注意什么
var()可以在::before/::after中用，但content属性只接受字符串、计数器或attr()，所以var()只能用于颜色、尺寸等数值型属性，不能直接输出文本内容——除非你用attr(data-label)配合data-label属性。
- ✅ 可用：
::before { background-color: var(--icon-bg); } - ❌ 不可用：
::before { content: var(--tooltip-text); }（浏览器会忽略） - ⚠️ 曲线救国：
<div data-label="保存成功"></div>+::before { content: attr(data-label); }，再用JS动态改data-label
最常被忽略的一点：CSS变量的值在计算前不校验合法性。比如--size: 20没单位，用在width: var(--size)里会直接失效，但开发者工具里看不出报错，只会显示“invalid property value”。调试时务必检查变量定义处的原始值是否带单位、是否拼写一致、是否大小写匹配。
