CSS变量不能用于display属性，因其不支持运行时计算；可用visibility或opacity配合变量控制显隐，真需切换display则须用class或JS操作。
display 不能用 CSS 变量直接赋值
你没法写 display: var(--show, block) 然后靠改变量来切换显示/隐藏——浏览器会直接忽略这个声明，display 不接受 CSS 变量作为有效值。这不是语法写错了，是规范层面不支持：CSS 变量只能代入到**计算上下文允许的位置**，而 display 是一个“原子级”属性，解析时必须拿到确定的关键字（如 block、none、flex），不能靠 runtime 计算。
用 visibility 或 opacity 配合 CSS 变量更靠谱
如果目标只是“视觉上控制显隐”，且不需要释放文档流空间，visibility 和 opacity 都支持变量，也够用：
-
visibility: var(--vis, hidden)—— 支持visible/hidden，保留占位 -
opacity: var(--op, 0)—— 支持数值，配合pointer-events: none可禁交互
注意：opacity: 0 元素仍响应事件，得手动加 pointer-events: none 才等效于“不可见不可点”。
真要切 display，得靠 class 切换或 JS 注入
需要真正移除/恢复布局流时，绕不开 DOM 层动作。两种轻量方案：
- 预设 class：
.is-hidden { display: none; }，用 JS 切element.classList.toggle('is-hidden') - 内联 style：
element.style.display = 'none'或element.style.display = ''（清空回默认）
别试图用 style.setProperty('--display-val', 'none') 再配 display: var(--display-val)——这不会生效，纯属白忙。
display: contents 是个特例，但和变量无关
有人试过 display: contents 想“隐形但保持子元素渲染”，但它和 CSS 变量无关，也不能靠变量触发。它本身就有兼容性坑：display: contents 在 Safari 旧版本不支持，且会让元素失去盒模型、无法设背景/边框/内外边距，子元素会直接冒泡到父容器的布局上下文中。真要用，得单独写死，别掺变量。
最常被忽略的一点：display 的切换会触发重排（reflow），比 visibility/opacity 的重绘（repaint）开销大得多。如果不是真需要腾出空间，优先用后两者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
