sass给雪碧图循环定位怎么写？

Question

我有这样一张雪碧图

这是我用css实现的效果

下面是部分css代码

.icon-item:nth-child(1) {
    background-position: -8px 0;
}
.icon-item:nth-child(2) {
    background-position: -95px 0;
}
.icon-item:nth-child(3) {
    background-position: -182px 0;
}
.icon-item:nth-child(4) {
    background-position: -269px 0;
}
.icon-item:nth-child(5) {
    background-position: -8px -70px;
}
.icon-item:nth-child(6) {
    background-position: -95px -70px;
}
.icon-item:nth-child(7) {
    background-position: -182px -70px;
}
.icon-item:nth-child(8) {
    background-position: -269px -70px;
}

css代码有很多相同的地方，改变的只有索引和坐标，看起来就有些冗余。最近接触到sass，想用循环实现。

类似这样的效果，要怎么改？

$for $i from 1 through 8 {
    .icon-item:nth-child(#{$i}) {
        background-position: ......
        }
}

Answer 1

既然都使用了scss.正确使用当时难道不是自动雪碧图

Answer 2

compass有个自动雪碧图的功能，每个图标都会给你生成一个类，直接拿过来用就好了