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输出块，它不读取、不修改、不感知其他块里的变量状态——它只认自己块里明确写出的值或计算表达式。