鍍金池/ 問答/HTML5  HTML/ sass給雪碧圖循環(huán)定位怎么寫?

sass給雪碧圖循環(huán)定位怎么寫?

我有這樣一張雪碧圖

clipboard.png

這是我用css實(shí)現(xiàn)的效果

clipboard.png

下面是部分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代碼有很多相同的地方,改變的只有索引和坐標(biāo),看起來就有些冗余。最近接觸到sass,想用循環(huán)實(shí)現(xiàn)。

類似這樣的效果,要怎么改?

$for $i from 1 through 8 {
    .icon-item:nth-child(#{$i}) {
        background-position: ......
        }
}
回答
編輯回答
舊言

compass有個(gè)自動雪碧圖的功能,每個(gè)圖標(biāo)都會給你生成一個(gè)類,直接拿過來用就好了

2018年1月16日 02:36
編輯回答
我以為

既然都使用了scss.正確使用當(dāng)時(shí)難道不是自動雪碧圖

2017年2月25日 23:31