Sass无法内置实现雪碧图功能，必须依赖外部工具生成JSON地图并转为静态map供Sass读取计算偏移；直接在Sass中切图、遍历目录或读取文件尺寸均不可行，因其无文件系统API；现代项目更推荐单独引用SVG或内联SVG以避免复杂构建链路。
Sass里没有内置雪碧图函数，得自己造一个
原生 Sass 不提供 sprites、sprite-map 这类函数，LibSass 和 Dart Sass 都不支持。所谓“自动雪碧图”，实际是靠构建工具（如 Webpack + spritesmith）生成 CSS 变量或地图 JSON，再由 Sass 读取并计算偏移。直接在 .scss 里写个函数去“自动切图+拼图+算位置”是不可能的——Sass 编译时根本接触不到文件系统。
正确路径：用 JSON 地图 + Sass map-get 计算偏移
典型工作流是：先用 Node 工具把 icons/ 下所有 PNG 打包成 sprite.png，同时输出 sprite.json，内容类似：
{
"home": { "x": 0, "y": 0, "width": 24, "height": 24 },
"user": { "x": -24, "y": 0, "width": 24, "height": 24 }
}
然后在 Sass 中用 @use "sass:map" 读取这个 JSON（需通过 @forward 或构建插件注入为 map），再封装定位逻辑：
示例函数：
@function sprite-offset($name, $prop) {
@return map-get(map-get($sprite-map, $name), $prop);
}
.icon-home {
background-image: url("sprite.png");
width: 24px;
height: 24px;
background-position: sprite-offset("home", "x") sprite-offset("home", "y");
}
注意：$sprite-map 必须是编译前就存在的静态 map，不能在运行时动态加载 JSON 文件。
常见错误：试图在 Sass 里读取图片尺寸或遍历目录
这些操作会直接失败，因为 Sass 是纯编译时语言：
-
@import "icons/*.png"—— 语法错误，@import不支持 glob -
image-width("icon.png")—— Dart Sass 已移除该函数，LibSass 也不保证可用 - 用
@each遍历./icons/文件夹 —— Sass 根本没有文件系统 API
所有尺寸、坐标、文件名映射，必须由外部工具预生成并固化为 Sass 可读的数据结构（map 或变量集合）。
兼容性与维护成本比想象中高
这套方案看似“自动化”，实则依赖完整构建链路：
- 每次增删图标，都要重新跑一次 spritesmith 脚本
- JSON 到 Sass map 的转换需要插件支持（如
sass-json-importer或自定义 webpack loader） - Dart Sass 5.0+ 默认禁用
node-sass风格的自定义函数访问文件系统，旧方案大概率失效
真正轻量且现代的做法，其实是放弃雪碧图：用 background-image: url() 单独引用 SVG，或用 <svg></svg> 内联，既免定位又支持缩放和 CSS 填色。只有在 HTTP/1.1 且图标极多、网络请求成为瓶颈时，才值得为雪碧图搭这一整套管道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
