用嵌套列表或Map模拟对象存储精灵图配置，循环生成类时需避免重复声明和单位混淆，CSS变量不适用于此场景。
怎么用 Sass List 存精灵图配置
精灵图坐标自动化，核心是把每个图标的 name、width、height、x、y 变成可遍历的数据结构。Sass 里没有对象字面量，得靠嵌套列表（list of lists）模拟。
常见错误是写成扁平 list：$icons: "home" 0 -16 "search" 0 -32——读取时极易错位，且无法扩展字段（比如加 hover-offset）。
- 正确做法：用二维 list，每项是命名的子 list，顺序固定：
(name width height x y) - 推荐用 map-like 写法（Sass 4.0+）：
$icons: ("home": (16px, 16px, 0, -16px), "search": (16px, 16px, 0, -32px))，更易读、可选键访问 - 若需兼容旧版 Sass，用
nth($item, 1)提取字段，但必须严格约定索引含义，否则维护时容易漏掉y值单位（px必须显式写）
循环生成 .icon-xxx 类时怎么避免重复声明
直接 @each 生成类名很常见，但容易忽略两个问题：一是 CSS 选择器权重叠加，二是未处理多状态（如 .icon-home:hover）。
典型错误现象：编译后出现 .icon-home { background-position: 0 -16px; } .icon-home { background-position: 0 -16px; }——其实是同一图标被多次匹配进不同循环分支。
立即学习“前端免费学习笔记（深入）”；
- 确保每个图标只被
@each一次；若需 hover 偏移，用嵌套 map："home": (normal: (0, -16px), hover: (0, -48px)) - 不要在循环里写
@extend公共基类（如.icon），Sass 会为每个实例生成冗余@extend规则，增大 CSS 体积 - 用
selector-append()构造伪类选择器：#{selector-append(".icon-#{$name}", ":hover")}，比拼字符串更安全
background-position 单位不一致导致定位偏移
精灵图工具（如 SpriteCow、IcoMoon）导出的坐标常为整数像素值，但 Sass 计算中若混用 px 和无单位数字，+ - 运算会失败或隐式转换单位，造成 1px 级别偏差。
错误示例：$x: 0; $y: -16; background-position: $x $y; → 编译为 background-position: 0 -16;，部分浏览器解析为 0px -16px，但某些旧版 WebKit 会当作 0% -16% 处理。
- 所有坐标值必须带单位：
0px、-16px，不能依赖隐式推断 - 如果用负数做计算（如 hover 向上偏移），先统一单位再运算：
$hover-y: ($y - 16px)，而不是$y - 16 - 用
assert-unit()（Sass 4.0+）或自定义函数校验单位，避免传入无单位数值
为什么不能直接用 CSS 自定义属性替代 Sass 循环
有人想用 --icon-home-x: 0px + JS 动态设置 class，看似灵活，但实际在精灵图场景下不现实。
问题不在语法，而在性能与维护成本：每个图标要写 4 个 CSS 变量（x/y/width/height），HTML 中还得手动写 style="--icon-home-x: 0px"，失去预编译优势。
- CSS 变量无法参与 Sass 的条件判断（比如“仅对宽高 >24px 的图标加
background-size”） - 无法利用
@at-root提升选择器层级，导致 hover 规则必须写在组件内部，破坏样式隔离 - 构建时无法做静态检查：Sass 可在编译时报错“
home在$icons中未定义”，CSS 变量只能运行时才发现拼写错误
真正需要动态更新坐标的场景极少，多数项目用 Sass 预生成足够稳定；真有运行时需求，应由构建脚本（如 PostCSS 插件）处理，而非塞进 CSS 变量。
