1
I am making a Sprite with Sass as follows below, but I would like to know if this way is correct or not, or if there is another better way.
$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;
}
}
}
Is there a logic in the size of your sprites, or are all of different sizes?
– Caio Felipe Pereira