Less本身不合并图片，只负责通过变量和Mixin管理雪碧图路径、尺寸及background-position定位逻辑；实际雪碧图生成需依赖webpack-spritesmith等工具输出图片与样式文件，再由Less封装计算，避免手动算坐标出错。
Less本身不合并图片，只管定位和路径
Less不是构建工具，它不负责把小图拼成大图。所谓“Less处理Sprite”，实际是两件事：一是用工具（如grunt-spritesmith、webpack-spritesmith）生成雪碧图和配套样式；二是用Less变量+Mixin管理路径、尺寸和定位逻辑。
直接在Less里写一堆background-position手动算坐标？行不通——容易错、难维护、缩放后全偏移。真正可靠的方案，一定是“工具生成图 + Less封装计算”配合使用。
- 生成环节交给
grunt-spritesmith或webpack-spritesmith，它们输出spritesheet.png和icon_sprite.less - 路径统一用
@img-base变量控制，必须配合~"@{img-base}/sprite.png"写法，否则变量不生效 - 定位逻辑抽成Mixin，比如
.sprite-pos(@col, @row, @icon-width, @icon-height)，避免手算负值出错
为什么.sprite-pos()参数必须带单位
Less里数值运算对单位敏感。传入@icon-width: 48（无单位）和@icon-width: 48px结果完全不同：前者参与乘法会变成纯数字，后者才能和px单位保持一致，最终输出background-position: -96px -48px这种合法值。
常见错误是定义变量时漏单位，比如@icon-size: 48，调用Mixin时写成.sprite-pos(2, 1, @icon-size, @icon-size)，结果编译出background-position: -96 -48——浏览器直接忽略这个非法值，图标消失。
立即学习“前端免费学习笔记（深入）”；
- 所有尺寸类参数（
@icon-width、@icon-height）声明时就该带px - Mixin内部不做单位转换，只做负向偏移计算：
(-@col * @icon-width)，单位由输入决定 - 如果项目用
rem或em，那就统一用对应单位定义变量，别混用
缩放场景下background-size和background-position必须同步调整
Retina屏或响应式需求常需缩放雪碧图，比如用background-size: 200px 300px把原图压到一半。此时background-position的像素值也得按相同比例缩小，否则图标错位——这不是Less能自动推导的，必须显式处理。
典型陷阱：以为Mixin里写了background-size就万事大吉，结果background-position还是按原始尺寸算的。比如原图单图标48×48px，第2行第3列应为-96px -48px；缩放到50%后，正确值是-48px -24px，但Mixin若没感知缩放比例，仍输出-96px -48px，图标就跑偏了。
- 固定缩放比（如
50%）：传入缩放后的尺寸，如@icon-width: 24px - 指定
background-size像素值（如200px 300px）：需另配一个Mixin，根据整图尺寸、图标行列数反推单图缩放后尺寸，再算偏移 - 不要依赖
transform: scale()替代background-size——它不影响background-position的计算基准
路径变量@img-base在不同构建环境下怎么设才不404
@img-base的值不是随便写的，它必须匹配构建工具对url()的实际解析规则。Webpack按入口文件算相对路径，Vite的public目录要求绝对路径，写错一个斜杠就404。
最常踩的坑是开发时路径通，构建后全挂：因为Less编译器只做文本替换，不校验文件是否存在。路径对不对，取决于构建工具怎么resolve那个url()里的字符串。
- Vite项目用
public/img/放雪碧图 →@img-base: "/img" - Webpack项目
src/assets/img/→@img-base: "../assets/img"（以Less文件所在目录为基准） - 多主题场景可嵌套：
@theme: "dark"; @img-base: "../themes/@{theme}/img" - SVG sprite要拼fragment ID，
url(~"@{sprite-base}/sprite.svg#icon-home")，ID部分不能变量化，除非你额外定义@icon-home: "icon-home"
路径问题往往拖到最后联调才发现，建议在dev阶段就用浏览器开发者工具看Network里雪碧图是否200加载成功，别等上线才查。
