less变量无法在媒体查询中运行时计算，因其在构建阶段已被替换为固定值，编译后css中不存在变量符号；需用css变量（如--primary-color）桥接，并在@media中通过:root覆盖，配合var()实现响应式变色。
Less变量本身不参与媒体查询运行时计算
Less变量在构建阶段就被替换成固定值，编译完的CSS里根本不存在@primary-color这类符号。你在@media (max-width: 768px)里写@primary-color: red;，lessc直接忽略或报错——它不是“没生效”，而是压根没进入编译流程。
常见错误现象包括：小屏下颜色没变、开发者工具里搜不到变量名、修改后刷新页面也无反应。
- Less不支持块级作用域变量重定义，
.dark { @color: #222; }这种写法在大多数版本中会被静默跳过 - 即使使用
modifyVars动态注入，也只影响尚未编译的源文件，对已生成的CSS无效 - 媒体查询是CSS运行时机制，而Less变量只存在于构建期，两者生命周期完全不重叠
想让样式随屏幕尺寸变化，必须用CSS变量桥接
正确路径是：用:root声明CSS变量 → 在@media中覆盖该变量 → 所有引用var(--primary-color)的地方自动响应。
Less里要做的只是“桥接”，不是“控制”：
- 在
variables.less顶部写：@primary-color: var(--primary-color, #007bff); - 确保
:root { --primary-color: #007bff; }出现在全局CSS最前面（如index.css或:root规则） - 媒体查询中写：
@media (max-width: 768px) { :root { --primary-color: red; } } - fallback值
#007bff不能省，否则未设置--primary-color时可能退成transparent导致文字消失
为什么var(--sm)不能用在@media条件里
@media (min-width: var(--sm))会静默失效，不是兼容性问题，而是CSS语法硬限制：媒体查询匹配发生在变量求值之前。浏览器解析@media时，var()还没开始计算，整条规则被跳过，DevTools里显示为灰色且无报错。
你无法绕过这个限制，但可以规避：
- 把断点值写死在
@media里，比如@media (max-width: 768px) - 如果需要集中管理断点，用Less变量定义数值（如
@sm: 768px;），再在@media中直接使用：@media (max-width: @sm) - 不要试图拼接
var(--@{name})，Less 4.0+ 不支持运行时求值，编译结果是非法属性名，浏览器丢弃
容易被忽略的重绘陷阱
改了:root上的CSS变量，依赖它的样式不会立刻更新。窗口缩放触发媒体查询匹配，不代表color: var(--primary-color)会实时变色——浏览器只在样式重计算周期（如DOM变动、class切换、强制reflow）时才重新求值。
补救方法要轻量且可靠：
- 监听
resize事件，在回调里执行document.documentElement.style.transform = 'scale(1)'，触发一次layout - 避免用
animation: force-repaint 0.001s这类hack，某些UA下可能失效 - 别忘了检查
getComputedStyle(document.documentElement).getPropertyValue('--primary-color')返回的是空字符串""而不是undefined，这是未声明状态的典型表现
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
