Less中处理2x/3x图background-position需用unit()或calc()避免单位混合运算错误，优先以无单位基准值配合unit()还原单位，或用calc(@x 2 1px)实现编译期计算。
Less中用calc()处理2x/3x图的background-position
直接用Less变量做乘法不行——@x2: 10px; @x3: @x2 * 1.5;会报错，因为Less不支持单位混合运算。真正能落地的方式是把像素值转成纯数字再算，最后手动加单位。
常见错误现象：background-position: (@x * 2)px (@y * 2)px; 这种写法会编译失败，Less解析器遇到*和单位混用就卡住。
实操建议：
- 定义基准值时去掉单位：
@base-x: 10; @base-y: 20; - 用
unit()函数还原单位：background-position: unit(@base-x * 2, px) unit(@base-y * 2, px); - 如果图是雪碧图且需适配2x/3x屏，优先用
calc()在CSS层计算：background-position: calc(@base-x * 2 * 1px) calc(@base-y * 2 * 1px);（注意1px是合法乘数，Less能识别）
用media查询配合@media (-webkit-min-device-pixel-ratio: 2)切图
Less本身不生成媒体查询逻辑，但可以封装mixin来统一管理2x/3x定位偏移。关键点在于：设备像素比不是整数，@media (min-resolution: 192dpi)比-webkit-min-device-pixel-ratio更通用，但iOS Safari仍依赖后者。
实操建议：
- 写mixin时把倍率作为参数：
.bg-pos(@x, @y, @ratio: 1) { background-position: unit(@x * @ratio, px) unit(@y * @ratio, px); } - 调用时分层：
.icon { .bg-pos(10, 20, 1); @media (-webkit-min-device-pixel-ratio: 2) { .bg-pos(10, 20, 2); } } - 别漏掉Firefox的
min-resolution写法，否则高分屏下定位错位
为什么不能直接用background-size缩放替代定位计算？
因为雪碧图里多个图标共用一张图，改background-size会整体缩放所有图标位置，导致相邻图标重叠或留白。动态定位本质是微调每个图标的起始坐标，不是缩放容器。
性能影响：用unit()或calc()都是编译期计算，无运行时开销；但若在大量选择器里重复写@media块，会显著增大CSS体积。
容易踩的坑：
-
unit(10 * 2.5, px)结果是25px，但2.5在2x图里极少用，实际只用整数倍（2或3），避免小数像素导致渲染模糊 - Less 4.0+才支持
calc()内联计算，旧版本必须用unit()兜底 - 三倍图定位不是简单×3——要先确认设计稿基准是@1x还是@2x，否则倍率链错一层，全盘偏移
实际项目里最麻烦的不是计算本身，是确认设计师给的标注值到底是基于哪套基准图，以及是否已把图标间距、边框等物理像素也按倍率换算过。这点漏查，后面所有unit()都白算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
