Less中变量无法在@media中重定义，应将边框样式写入媒体查询内部，用Mixin封装响应逻辑，避免误用不存在的border-width()函数，注意单位运算规范，并通过box-shadow或transform解决Retina屏边框发虚问题。
Less里怎么用变量控制边框粗细的响应式变化
不能直接在@media里重定义全局变量，这是最常卡住的地方。Less编译时变量只解析一次，媒体查询里的@border-width赋值根本不会覆盖外层变量。
正确做法是把边框样式写进媒体查询内部，用变量做计算中间值，而不是指望变量“动态变”：
- 定义基础变量：
@border-base: 1px、@border-lg: 2px - 在
@media (min-width: 768px)里写.box { border: @border-lg solid #ccc; }，而不是试图改@border-base - 如果多个元素共用逻辑，抽成带参数的Mixin：
.border-responsive(@size) { border: @size solid #ccc; }，再在不同断点里调用.border-responsive(@border-lg)
为什么用border-width函数做计算会出错
Less没有border-width()这种内置函数——有人搜错关键词，把CSS的border-width属性当成了Less函数，结果编译报错Unrecognised input。
真正能用的只有数学运算和已声明变量：
立即学习“前端免费学习笔记（深入）”；
- 合法：
border: (@border-base * 1.5) solid #eee - 非法：
border: border-width(@border-base) solid #eee（语法错误） - 注意单位：
1px * 2得出来是2px，但1 * 2px会变成2 px（空格导致CSS无效）
移动端边框在Retina屏上发虚怎么办
单纯设border: 1px在2x屏上实际是2物理像素，浏览器抗锯齿一糊就变0.5px视觉效果——这不是Less问题，但容易误以为是变量没生效。
解法要绕过像素边界限制：
- 用
transform: scaleY(0.5)缩放整个边框容器（需配合transform-origin） - 或者用
box-shadow模拟：box-shadow: 0 0 0 0.5px #ccc，这个值Less里可以写成@border-hairline: 0.5px - 别用
border-image，兼容性差，且Less变量传不进URL路径里
多个断点共用同一组边框变量时怎么避免重复写死
硬编码每个断点的border值会导致维护困难。更稳的方式是建一个映射表，用Mixin展开：
.border-by-breakpoint(@breakpoint) when (@breakpoint = mobile) {
border: @border-sm solid #ddd;
}
.border-by-breakpoint(@breakpoint) when (@breakpoint = tablet) {
border: @border-md solid #ccc;
}
.border-by-breakpoint(@breakpoint) when (@breakpoint = desktop) {
border: @border-lg solid #bbb;
}然后在对应媒体查询里调用：@media (min-width: 1024px) { .card { .border-by-breakpoint(desktop); } }
关键点：变量本身不响应，响应的是你调用它的位置；所有“动态”都发生在编译期，不是运行时。
