CSS变量不能用于媒体查询条件，因媒体查询只接受字面量；唯一合法方式是媒体查询内重设:root或对应选择器的变量值。
你的 CSS 变量在媒体查询中“不生效”，大概率不是变量写错了，而是你试图让 var() 出现在 @media 条件里，或者误以为媒体查询能自动读取 :root 中定义的变量来驱动断点——这两者都违反 CSS 解析时序和作用域规则。
为什么 @media (min-width: var(--sm)) 完全被忽略
CSS 引擎在解析媒体查询时，根本不会执行 var() 求值。它只接受字面量（如 768px），而 var(--sm) 属于运行时计算值，此时还未进入层叠与继承阶段。结果就是整条 @media 规则被静默丢弃，DevTools 里显示为灰色，控制台零提示。
-
@media (max-width: var(--bp-md))和@media (max-width: var(--bp-md, 768px))都非法，fallback 不起作用 - 即使
--bp-md已在:root中定义为768px，也无法穿透到媒体特性中 - JS 修改
--bp-md后，媒体查询不会重新匹配——它只响应视口变化，不响应变量变更
变量在媒体查询中“生效”的唯一合法方式
变量不能驱动媒体查询，但媒体查询可以重设变量。正确路径是：先在 :root 声明默认值，再在媒体查询块内对 :root（或具体容器）重新赋值。
- 必须显式写出选择器，
@media (max-width: 768px) { :root { --gap: 8px; } }才有效；@media () { --gap: 8px; }无效 - 重设后的变量只对后续样式生效，且依赖继承链：若你在
body下写padding: var(--gap)，需确保该body能从:root继承到新值 - 多个断点要分别重设：
@media (min-width: 1024px) { :root { --grid-cols: 4; } }
常见误操作：把变量塞进组件却指望媒体查询全局覆盖
比如你在 .card 里定义了 --text-color，又在 @media (prefers-color-scheme: dark) 中对 :root 改 --text-color，那 .card 内的 var(--text-color) 依然读不到——因为它的作用域是 .card 自身，不是 :root。
立即学习“前端免费学习笔记（深入）”；
- 媒体查询中重定义变量，必须作用于同一选择器层级，例如：
@media (dark) { .card { --text-color: #f0f0f0; } } - 别把所有变量都堆在
:root，否则一个--primary变动会意外影响所有组件的var(--primary) - 组件级变量应带命名空间，如
--card-text-color，避免跨容器污染
真正容易被忽略的继承断点
变量继承不是“取父元素当前计算值”，而是“向上查找最近一次有效声明”。一旦中间某层写了 --color: unset 或 --color: initial，查找就终止，子元素拿不到 fallback 以外的任何值。
-
unset让变量回归未定义状态，var(--x, red)会回退到red；initial更彻底，等效于删除该声明 -
inherit对自定义属性无效，不能用它强制继承--x - 调试时不要只看父元素，得顺着
Element面板逐层点开祖先节点，在Styles里确认每层是否定义了该变量、是否被unset中断
