Less中需用递归mixin遍历@sprites列表，通过unit()或字符串插值（如~"#{@x}px #{@y}px"）安全生成雪碧图background-position值，避免单位混用报错。
Less里用循环生成雪碧图坐标要避开单位混用错误
Less本身不解析图片，所谓“生成雪碧图定位”，实际是批量计算每个图标在合并图中的background-position值。常见错误是把像素值和变量直接拼接导致编译失败，比如@x + px会报Operation on an invalid type。
必须用unit()或字符串插值确保类型安全：
.icon-home { background-position: unit(@x, px) unit(@y, px); }更稳妥的做法是统一用~"#{@x}px #{@y}px"做字符串输出，避免单位运算。
用.for()循环配合@sprites列表批量输出定位规则
Less没有原生for，得靠递归混合（mixin）模拟。核心是定义一个图标元数据列表，每项含名称、宽、高、x偏移、y偏移：
立即学习“前端免费学习笔记（深入）”；
@sprites: "home" 24 24 0 -0,
"search" 24 24 -24 -0,
"user" 24 24 -48 -0;然后写递归混合遍历：
.gen-sprite-loop(@list, @i: 1) when (@i =< length(@list)) {
@item: extract(@list, @i);
@name: extract(@item, 1);
@x: extract(@item, 4);
@y: extract(@item, 5);
.icon-@{name} { background-position: ~"#{@x}px #{@y}px"; }
.gen-sprite-loop(@list, (@i + 1));
}
.gen-sprite-loop(@sprites);注意：x/y值必须带负号（雪碧图通常向左/上偏移），且extract()索引从1开始。
自动计算坐标时别忽略雪碧图排列方式和间距
如果图标是横向紧密排列（无间隙），x坐标就是-(@index - 1) * @icon-width；纵向则是-(@index - 1) * @icon-height。但实际项目常有1px间距或非等宽图标，硬编码公式容易出错。
推荐做法：
- 用工具（如
grunt-spritesmith）先生成JSON坐标文件，再用less-plugin-functions读取并转为变量 - 或把坐标表维护在单独的
sprites.less里，人工更新——比动态计算更可控 - 横向排列时，
@y通常全为0；纵向时@x全为0，别反了
生成的CSS要适配Retina屏就得加@media查询和background-size
单纯定位不够。雪碧图在2x屏下会模糊，必须同时缩放背景图尺寸并调整坐标：
.icon-home {
background-image: url("sprite.png");
background-position: 0 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.icon-home {
background-image: url("sprite@2x.png");
background-size: 48px 48px; /* 原图宽高的一半 */
background-position: 0 0;
}
}关键点：background-size设为原始雪碧图尺寸的1/2，而background-position值不变（因为坐标已按原图像素定义）。如果用Less变量控制，记得@size和@size-retina要成对管理。
坐标计算本身不难，难的是和构建流程、多倍图、响应式规则对齐——漏掉任一环，上线后图标就错位。
