CSS变量值缺失本身不会导致布局崩塌，但会引发border、background、color等依赖属性解析异常，导致边框消失、背景不渲染、尺寸计算错误；未定义var(--x)使border简写展开失败，仅保留显式设置项，其余为空；Vue scoped中:root因属性选择器不匹配而失效；fallback应使用字面量而非嵌套var()；调试需依赖Computed面板而非源码或控制台报错。
直接说结论：CSS变量值缺失本身不会导致布局崩塌，但会引发 border、background、color 等依赖它的属性解析异常，进而让浏览器丢失关键盒模型信息（如 border-top-color、border-width），最终表现为边框消失、背景不渲染、尺寸计算错误——这些才是布局“看起来崩了”的真实原因。
为什么未定义的 var(--x) 会让 border 变成空壳？
CSS简写属性（如 border: 1px solid var(--red)）在浏览器内部需要展开为长写形式（border-width、border-style、border-color）才能参与盒模型计算。而这个展开过程依赖变量是否可计算：
- 若
--red未在:root或当前作用域中声明，Chrome/Firefox 会将整条border规则降级为“部分有效”状态：只保留显式设置项（如border-bottom-color: var(--dao-pure-white)），其余展开值全为空（border-top-color: ;） - 此时
getComputedStyle(el).borderTopColor返回"rgba(0, 0, 0, 0)"（透明黑），而非报错或继承父级 - 更隐蔽的是：当同时设置
border简写 + 某个方向的单独颜色（如border-bottom-color），未定义变量会让整个border的宽度/样式丢失，只剩底部颜色生效，视觉上就像“只有底边有线”，父容器高度塌陷
Vue scoped 样式里 :root 为啥不起作用？
Vue 的 scoped 会自动给所有选择器加属性哈希（如 [data-v-f3f2d1a4]），但 :root 是伪类，匹配的是 <html> 元素——而 <html> 不会有 data-v-xxx 属性，所以定义完全失效。
- 错误写法：
<style scoped> :root { --primary: #007bff; } </style>→ 实际生成html[data-v-f3f2d1a4] { --primary: #007bff; }，永远不匹配 - 正确做法：把变量定义提到全局样式文件（
main.css或index.html的<style>中） - 替代方案：在组件根元素上定义，比如
<div class="my-comp" style="--primary: #007bff">，然后用.my-comp { border: 1px solid var(--primary); } - 注意：不要用
<style>块内嵌:root+scoped混用，这是常见误操作高发区
怎么安全地 fallback 到字面量，而不是掉进嵌套 var() 循环？
var(--x, #000) 的第二个参数不是“兜底终点”，而是新一轮变量查找起点——这意味着你写 var(--x, var(--y, red))，如果 --y 也未定义，还会继续找下去；一旦形成循环引用（--x: var(--y); --y: var(--x)），Chrome 和 Firefox 会静默返回初始值（如 color: inherit），而不是报错。
立即学习“前端免费学习笔记（深入）”；
- 真正可靠的 fallback 是明确字面量：
border-color: var(--border-color, #ccc);，而不是var(--border-color, var(--fallback-color)) - 调试时别只看源码，用 DevTools 的 Computed 面板查最终值——它显示的是浏览器实际计算出的结果，比读 CSS 文件更准
- JavaScript 读取未定义变量返回空字符串
""，不是null或undefined，所以if (getComputedStyle(el).getPropertyValue('--size'))无法区分“未定义”和“定义为空字符串”
最易被忽略的点：变量缺失的影响不是立即崩溃，而是延迟暴露——比如某组件在主题切换后才首次用到 var(--theme-accent)，此时若该变量未在新主题中定义，border 就突然消失，但控制台毫无报错。排查时得盯住 Computed 面板里的具体属性值，而不是等页面“看起来不对”才动手。
