var()后漏分号会导致整条CSS声明失效，因解析器将后续内容误吞为同一值，直至遇到{、}或;才停止，造成静默丢弃而非局部报错。
var()后面漏分号会连带废掉整条CSS规则
不是var()本身报错，而是它所在的那条声明因为缺少分号，让浏览器在解析时把后续所有内容都吞进同一个“值”里，直到遇到下一个{、}或;才停下——结果就是整段规则被当作语法错误丢弃。
常见错误现象包括：color: var(--text); background-color: #fff（缺分号）→ 后面的background-color完全不生效；更隐蔽的是多行写法中最后一行忘了加分号，比如：
button {
color: var(--primary)
padding: 12px 24px
border: none
}
这三行会被解析成一条声明：color: var(--primary) padding: 12px 24px border: none，显然非法，整个button块样式清零。
- CSS解析器不按行切分，而是按token流识别
property: value;结构，分号是声明结束的唯一明确标记 - 即使
var(--x)本身拼写正确、变量已定义，只要它所在声明没以;结尾，整条声明就作废 - 开发者工具的Styles面板里，这条规则会直接消失，不会显示为“strike-through”，也不会报错——静默失效
- 如果该规则后面还跟着其他声明（如
font-size: 14px;），它们也不会被解析，因为解析器还没从上一条非法声明里恢复出来
为什么不是只报错var()，而是整段挂掉
CSS语法规定：一个声明块（{...}内）由若干条“声明”组成，每条声明必须是property: value;格式。分号缺失会让解析器误判结构边界，进而把多个本应独立的声明合并成一个非法token序列。
立即学习“前端免费学习笔记（深入）”；
举个具体例子：
.card {
margin: var(--space-md)
background: var(--bg-card)
border-radius: 8px
}
解析器实际看到的是：margin: var(--space-md) background: var(--bg-card) border-radius: 8px，这不是任何合法属性名，也不匹配任何已知语法，所以整条规则被跳过——.card里三条样式全失效，且不会在Computed面板里出现。
- 这和JavaScript不同：JS有ASI（自动分号插入），CSS没有
- 构建工具（如PostCSS）通常不会补分号，压缩后问题更难定位
- 编辑器语法高亮可能仍显示正常，掩盖了真实问题
- 如果变量本身未定义，你会误以为是
var()的问题，其实根源是分号
如何快速定位这类分号缺失问题
别盯着var()看，先确认声明是否完整闭合。最有效的办法是打开DevTools的Styles面板，逐条检查目标选择器下的声明是否全部列出；如果某几条“应该存在”的样式根本没出现，大概率是前面某条声明缺了分号。
- 在Sources面板里，用Ctrl+F搜索
var(，然后人工检查每个匹配项后是否有; - 把疑似出问题的规则块单独复制到新CSS文件中加载，排除其他规则干扰
- 用Prettier或Stylelint配置
declaration-block-trailing-semicolon规则，强制校验 - 注意缩进陷阱：有些开发者习惯把
;换行顶格写，但CSS不认这种风格，必须跟在值后面
真正棘手的是，这类问题往往藏在多人协作的长CSS文件里，某次合并时删掉了一个分号，整块组件样式就突然白屏——它不报错，不警告，只安静地消失。
