雪碧图未过时，是特定场景下的性能权衡；sass不生成雪碧图，需用gulp.spritesmith等工具生成并注入坐标变量，关键在路径对齐、变量注入与构建链路协同。
为什么现代项目里还用雪碧图？
雪碧图不是过时技术，而是特定场景下的性能权衡——比如大量小图标、低频更新、需兼容老浏览器的管理后台。Sass 本身不生成雪碧图，它只负责把生成后的坐标映射成可维护的 CSS；真正干活的是 grunt-spritesmith、gulp.spritesmith 或 sass-sprite 这类工具。混淆这点，后面所有配置都会跑偏。
如何让 Sass 正确读取雪碧图坐标？
关键在「路径对齐」和「变量注入」。工具生成的 _sprite.scss 必须被 Sass 编译器识别为模块，且其中的 $icon-home-width、$icon-home-x 等变量要能被业务样式文件直接调用。
- 确保生成的 SCSS 文件放在
@import可达路径（如src/styles/_sprite.scss），且命名以_开头 - 不要手动写坐标值——每次图片增减都得改，必须靠工具自动生成并覆盖该文件
- 若用
@use（Dart Sass 2.0+），需在生成的 SCSS 中加@forward或导出map，否则变量不可见 - 常见报错：
Undefined variable "$icon-close-x"，基本是路径没 import 对，或生成脚本没执行
生成工具选哪个？参数怎么配才不翻车？
gulp.spritesmith 和 webpack-spritesmith 是目前最稳的两个。别碰纯 Node 脚本手搓合并——颜色失真、间距错位、Retina 支持弱的问题太多。
-
padding至少设为2，不然相邻图标边缘可能被裁切（尤其带描边或阴影的 SVG 转 PNG） - 输出尺寸用
algorithm: 'binary-tree'，比默认的top-down更省空间，但会打乱文件顺序——别依赖文件名排序写样式 - 要支持 2x 屏，必须同时生成两套图：
retinaSrcFilter指向@2x.png文件，并在 Sass 变量里暴露$icon-home-2x类字段 - 常见坑：
cssFormat: 'scss_maps'在新版spritesmith里已废弃，得换用cssSpritesheetFormat插件
怎么避免每次改图都手动编译？
雪碧图更新必须触发两件事：资源文件重生成 + Sass 重新编译。靠人工跑命令等于埋雷。
- Webpack 项目：用
watchOptions监听src/icons/*.png，配合require.context动态加载生成的 SCSS - Gulp 项目：把
spritesmith任务设为watch的前置依赖，用gulp.watch('src/icons/**/*', gulp.series('sprite', 'sass')) - 别把雪碧图 PNG 提交到 Git —— 它是构建产物，应加入
.gitignore；只留源图标和生成配置 - 最容易被忽略的一点：开发时图标临时增删，常忘记清空旧的
_sprite.scss，导致变量残留、坐标错乱。建议生成前加del.sync('_sprite.scss')
$icon-search-y 突然变成 NaN。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
