Less变量在@media中无法重定义生效，因其编译时静态作用域机制决定变量只解析一次；正确做法是将响应式样式规则整体写入@media内，用预设变量或Mixin实现适配。
Less变量在@media里“改不生效”，不是你写错了，而是它根本就不能那样用。 编译时变量只解析一次，@media块里的赋值语句（比如@border-width: 2px）压根不会覆盖外层已声明的变量值——这不是bug，是Less设计逻辑决定的。
为什么@media里重定义变量没用
Less是编译时语言，所有变量在进入@media前就已完成求值。你在媒体查询内部写@border-base: 2px，编译器会直接忽略这行（或报warning），因为变量作用域是静态的、不可变的。你看到的“失效”，其实是代码根本没参与样式生成。
- 变量不能跨作用域修改：外层
@border-base: 1px，@media里再写一遍@border-base: 2px，最终所有用到@border-base的地方还是1px - 没有“运行时变量”概念：CSS本身不支持动态变量，Less只是预处理，别指望它像JS一样响应视口变化
- 常见误判：以为
@media (min-width: 768px) { @border-base: 2px; .box { border: @border-base solid #000; } }能生效——实际.box的边框仍是1px
正确做法：把样式写进@media内部，用计算代替重定义
别动变量本身，动的是使用方式。把需要响应式变化的样式规则完整写进@media块里，用已声明变量做中间计算。
- 先定义基础值：
@border-sm: 1px、@border-md: 1.5px、@border-lg: 2px - 在断点内直接调用：
@media (min-width: 768px) { .card { border: @border-md solid #eee; } } - 单位运算要小心：
@border-sm * 2得2px，但2 * @border-sm可能因空格变成2 px（非法CSS） - 避免重复书写：多个元素共用同套逻辑？抽成Mixin：
.border-style(@w) { border: @w solid #ccc; }，然后在不同断点里调用.border-style(@border-lg)
别被“border-width()函数”带偏了
搜“Less border-width函数”会踩坑——border-width()根本不是Less内置函数，是有人把CSS属性名当函数用了。Less里只有数学运算和变量引用。
- 合法写法：
border: (@border-sm * 1.5) solid #333 - 非法写法：
border: border-width(@border-sm) solid #333→ 编译报错Unrecognised input - 想封装边框逻辑？用Mixin，不是函数：
.border(@width, @color) { border: @width solid @color; }
Retina屏边框发虚不是变量问题，是物理像素映射问题
设border: 1px在2x屏上渲染为2物理像素，浏览器抗锯齿一糊，视觉上像0.5px——这跟Less变量完全无关，但常被误认为“变量没生效”。
- 解决方案不是改变量，而是换渲染方式：
box-shadow: 0 0 0 1px #ccc或transform: scaleY(0.5)配合transform-origin: top - 如果必须用
border，可配合device-pixel-ratio媒体查询：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .el { border: 0.5px solid #ccc; } }（注意兼容性）
真正容易被忽略的点是：变量失效从来不是语法错误，而是对Less编译模型的理解偏差。你写的每一条@media规则，本质都是独立的CSS输出块，它不读取、不修改、不感知其他块里的变量状态——它只认自己块里明确写出的值或计算表达式。
