estou fazendo um sprite com sass da seguinte maneira abaixo, mas gostaria de saber se essa maneira é a correta ou não, ou se existe outra maneira melhor.
$sprites: bovino, suino, aves, embutidos, congelados, ovinos, laticinios;
.icon-sprite {
background-color: transparent;
display: inline-block;
white-space: nowrap;
}
// insert the icons
@each $icon in $sprites {
[class*='icon-#{$icon}'] {
background-image: url(../img/icon-#{$icon});
background-repeat: no-repeat;
width: 55px;
height: 55px;
@if $icon == "bovino" {
background-position: 0 -1px;
}
@else if $icon == "suino" {
background-position: 0 -117px;
}
@else if $icon == "aves" {
background-position: 0 -175px;
}
@else if $icon == "embutidos" {
background-position: 0 -235px;
}
@else if $icon == "congelados" {
background-position: 0 -296px;
}
@else if $icon == "ovinos" {
background-position: 0 -60px;
}
@else if $icon == "laticinios" {
background-position: 0 -355px;
}
}
}