雪碧图未过时，是特定场景下的性能权衡；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 支持弱的问题太多。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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')

雪碧图优化真正的复杂点不在 Sass 写法，而在构建链路里「图→坐标→CSS→渲染」这四个环节的版本对齐。一个工具升级、一次 Sass 版本切换、甚至图标文件名里多了一个空格，都可能让 $icon-search-y 突然变成 NaN。