scss不能自动生成雪碧图位置，只能将预设的行列索引、图标尺寸和缩放比例安全转为带单位的background-position值；需明确定义$icon-width、$icon-height等变量并统一单位，函数返回值必须显式乘单位，缩放时需传入$scale参数，批量生成类名推荐用map+@each，所有坐标必须带px单位。
SCSS 本身不能“自动生成”雪碧图位置——它不读文件、不测像素、不分析图片，所有坐标必须由人或外部工具提供。你真正能用 SCSS 做的，是把已知的列/行索引、单图尺寸、缩放比例，安全地转成带单位的 background-position 值，避免手算出错。
为什么直接写 sprite-pos(2, 1) 就能输出 -96px -48px
关键不是函数多聪明，而是你定义的坐标系和单位是否一致：
- 列号 $col 控制水平偏移（x），行号 $row 控制垂直偏移（y），索引从 0 开始
- 必须提前定义单图宽高变量，比如
$icon-width: 48px、$icon-height: 48px，单位不能省 - 函数里要显式乘单位：
@return (-$col * $icon-width) (-$row * $icon-height)，写成-$col * 48px会报错 - 调用
background-position: sprite-pos(2, 1)输出的就是-96px -48px，不是百分比，也不是无单位数字
background-size 一加，sprite-pos() 就失效？
不是函数错了，是缩放改变了作用对象：偏移值现在要作用在缩放后的图上，而不是原图。你得让函数知道缩放比例。
- 把缩放抽成变量，如
$scale: 0.5 - 改函数签名：
@function sprite-pos($col, $row, $scale: 1)，并在返回值里乘$scale - 调用时写
background-position: sprite-pos(2, 1, 0.5)，输出-48px -24px - 如果用
background-size: contain或cover，别依赖像素偏移——非线性缩放下 SCSS 算不出准确值，换用background-position: right 10px bottom 20px更稳
怎么批量生成 .icon-home、.icon-user 这类类名？
手写容易漏、难维护，用 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)); } } - 别用扁平 list（如
"home" 0 0 "user" 1 0），nth() 容易取错位；也别漏单位，(0, 0)要写成(0px, 0px)才能参与运算 - 伪类 hover 偏移建议用
selector-append(".icon-#{$name}", ":hover")，比字符串拼接更健壮
最常被忽略的一点：所有坐标值必须带单位，且必须是像素；SCSS 不会自动补 px，也不会帮你把设计稿里的 rem 换算成精灵图偏移——那是构建工具或设计师该干的事。你只负责把确定的数字，安全、可复用地转成 CSS 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
