sass本身不生成坐标，也不能自动读取图片尺寸，因其原生无文件系统api，无法遍历目录或分析像素；所谓“自动计算”实为外部工具将json等结构化数据转为scss变量后通过map-get提取。
Sass 本身不生成坐标，也不能自动读取图片尺寸——所有“自动”都依赖外部工具输出的结构化数据（JSON 或 SCSS 变量），否则你写的 background-position 就是硬编码，一改图标就得全手动重算。
为什么直接在 Sass 里写循环算坐标行不通
原生 Sass 没有文件系统 API，无法遍历 icons/ 目录、读取 PNG 尺寸或分析像素间距。所谓“自动计算”，本质是把工具生成的坐标数据（如 sprite.json）转成 Sass 可用格式，再用 map-get() 提取。常见错误包括：
- 在
.scss里写@each $icon in list-of-files—— Sass 编译时根本看不到文件 - 用
image-width()函数（仅 LibSass 旧版支持，Dart Sass 已移除）—— 现代项目会报Undefined function "image-width" - 把坐标当纯数字参与运算（如
$y - 16），结果单位丢失，background-position: 0 -16在某些浏览器被解析为百分比
必须用构建工具生成坐标变量，且路径要对得上
核心是让生成的 _sprite.scss 被业务样式正确 import，并确保变量作用域可见。关键点：
- 生成脚本必须执行成功，否则
_sprite.scss是空文件或不存在，编译时报Undefined variable "$icon-close-x" - 文件名必须以
_开头，且放在@import可达路径下（例如src/styles/_sprite.scss） - 若用
@use（Dart Sass 2.0+），生成的 SCSS 中需加@forward "."或显式@exportmap，否则变量不可见 - 路径别名要一致：工具配置的
cssImageRef: "~sprite.png"必须和@import语句中的路径匹配，否则背景图 404
手写坐标映射时，单位和结构必须严格
如果不用工具、只靠人工维护（比如小项目或临时调试），二维 list 或 map 写法必须带单位、字段顺序固定：
- 错误写法：
$icons: "home" 0 -16 "search" 0 -32—— 扁平 list 易错位，nth($item, 4)取到的可能是下一个图标的 name - 推荐写法：
$icons: ("home": (16px, 16px, 0px, -16px), "search": (16px, 16px, 0px, -32px))—— key 访问安全，单位明确 - 所有
x/y值必须带px（不能是0或-16），否则加减运算会出错；hover 偏移写成$y - 16px，不是$y - 16 - 用
selector-append(".icon-#{$name}", ":hover")构造伪类，比字符串拼接".icon-#{$name}:hover"更可靠，避免空格或特殊字符问题
Compass 和 webpack-spritesmith 的配置差异点
两者都生成变量，但注入方式和默认行为不同，容易踩坑：
- Compass 的
@import "icons/*.png"会自动生成$icons-sprite-dimensions和all-icons-sprites()mixin，但要求图片目录在images/下，且需@import "compass/utilities/sprites"前置 - webpack-spritesmith 输出的是纯变量文件（如
_sprites.scss），内容类似$icon-home-x: 0px;，需手动@import，不带 mixin - Compass 默认开启 magic sprite selectors（
icon_hover.png→ 自动加:hover规则），如不需要，得设$disabled-magic-sprite-selectors: true - webpack-spritesmith 的
apiOptions.cssImageRef值（如"~sprite.png"）必须和 Webpack 的resolve.alias对齐，否则 CSS 里background-image: url(~sprite.png)解析失败
真正耗时的从来不是写 Sass，而是让工具链稳定输出可信赖的坐标数据——一旦 JSON 或 SCSS 文件没生成、路径错一位、单位漏一个 px，整个雪碧图就偏移或失效，而这类问题往往只在构建后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
