I have such a sprite picture
css
here is a portion of css Code
.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 code has a lot in common, only the indexes and coordinates are changed, and it looks a little redundant. I have recently come into contact with sass and want to implement it in a loop.
how to change an effect like this?
$for $i from 1 through 8 {
.icon-item:nth-child(-sharp{$i}) {
background-position: ......
}
}