mix-blend-mode等混合模式属性不支持CSS变量，因其为关键字型枚举属性，浏览器解析时直接跳过var()且静默丢弃；应改用isolation隔离+原子类切换方案。
某些 CSS 属性根本不会参与自定义属性的计算流程，var() 在它们身上不是“失效”，而是被浏览器直接跳过——不解析、不报错、不 fallback。
mix-blend-mode、background-blend-mode 等混合模式属性不支持 var()
这些是关键字型枚举属性，只接受 multiply、screen、luminosity 等固定值。浏览器在解析阶段就拒绝把 var(--mode) 当作合法输入，整条声明被静默丢弃。
-
mix-blend-mode: var(--mode, multiply)依然无效，后备值不触发 - 用 JS 动态设置
el.style.mixBlendMode = 'difference'可行，但会绕过伪类、响应式前缀和 transition - 真正可控的做法是：用
isolation: isolate显式隔离混合上下文，再配合原子类（如.mix-difference）切换
border、background 等简写属性对未定义变量极其敏感
当 border: 1px solid var(--red) 中的 --red 未定义时，浏览器无法展开为 border-top-color 等长写形式，cssRules[i].cssText 里会出现大量空值（如 border-top-color: ;），甚至丢失 border-style 或 border-width。
- 必须确保所有被引用的变量已在作用域内明确定义，且拼写、大小写、作用域完全匹配
- 避免在局部选择器中定义变量后，在简写属性中跨作用域引用
- 调试时优先用
getComputedStyle(el).borderTopColor查运行时值，比看 Styles 面板更可靠
calc() 内部的 var() 不是“不生效”，而是整条 calc() 被丢弃
只要 var(--gap) 的值缺失单位（如 --gap: 20）、或加减号缺空格（如 calc(100%-20px)），整个 calc() 表达式就会被浏览器判定为非法，连同外部属性一起被忽略。
-
width: calc(100% - var(--gap))要求--gap必须带单位（20px），不能是裸数字 -
left: calc(-50% + var(--offset))中的+左右都必须有空格，否则解析失败 - 旧版 Edge（12–18）连
calc(var(--x))都不认识，整条声明消失，PostCSS 插件也无法安全降级
最常被忽略的一点：变量是否被定义，和它是否“能用”，是两回事。很多问题不出现在语法层，而出现在浏览器解析简写属性或枚举属性时的早期校验阶段——此时连计算机会都不会启动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
