纯 Sass 无法自动计算雪碧图偏移量——所有坐标必须由外部工具预生成或人工定义，否则 background-position 值就是硬编码，改一个图标就得全手动重算。
为什么 sprite-pos() 函数不能自己读图、算尺寸
Sass 编译时没有文件系统 API，既不能遍历 icons/ 目录，也不能调用 image-width("icon.png")（Dart Sass 已移除该函数，LibSass 也不保证可用）。所谓“自动”，本质是把外部工具输出的结构化数据（如 JSON 或 SCSS 变量）转为 Sass 可读格式，再用 map-get() 提取。
- 写
@each $file in glob("*.png")—— 语法错误，Sass 不支持 glob - 在
.scss里直接@import "icons/home.png"—— 编译失败，@import只认 CSS/SCSS 文件 - 试图用
nth($list, 2)解析扁平列表（如"home" 0 -16 "user" 0 -32）——极易取错位，且单位丢失导致background-position: 0 -16被某些浏览器解析为百分比
怎么写一个真正可用的 sprite-pos() 函数
它不负责“发现图标”，只负责把已知的列/行索引安全转为带单位的像素偏移。关键在坐标系统一和单位显式：
- 定义单图尺寸变量：
$icon-width: 48px、$icon-height: 48px（单位不能省） - 函数签名必须带单位运算：
@function sprite-pos($col, $row) { @return (-$col * $icon-width) (-$row * $icon-height); } - 调用时传入索引（从 0 开始）：
background-position: sprite-pos(2, 1);→ 输出-96px -48px - 别写成
-$col * 48px，这会报错；必须用变量乘，单位才被保留
加了 background-size 后偏移全乱了怎么办
不是函数错了，是缩放改变了作用对象：偏移值现在要作用在缩放后的图上。原始图 200×200px，含 4 个 50×50px 图标；若设 background-size: 100px 100px（缩放 0.5 倍），原来 -100px -50px 就得变成 -50px -25px。
- 给函数加缩放参数：
@function sprite-pos($col, $row, $scale: 1) { @return (-$col * $icon-width * $scale) (-$row * $icon-height * $scale); } - 调用时显式传参：
background-position: sprite-pos(2, 1, 0.5); - 若用
background-size: contain或cover，放弃像素偏移——非线性缩放下 Sass 算不出准确值，改用background-position: right 10px bottom 20px
批量生成 .icon-home 类名的可靠写法
手写易漏、难维护，用 map + @each 是唯一可读又难出错的方式：
- 定义结构化数据：
$icons: ("home": (0, 0), "user": (1, 0), "search": (0, 1));（每个值是(col, row)元组） - 循环生成：
@each $name, $pos in $icons { .icon-#{$name} { background-position: sprite-pos(nth($pos, 1), nth($pos, 2)); } } - 伪类 hover 偏移用
selector-append(".icon-#{$name}", ":hover")，比字符串拼接更健壮 - 所有
x/y值必须带px（如(0px, -16px)），否则参与运算会出错
最常被忽略的是：所有坐标值必须带单位，且必须是像素；Sass 不会自动补 px，也不会帮你把设计稿里的 rem 换算成像素——它只做算术，不做推断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
