1

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;
        }

    }

}
1
  • Existe uma lógica no tamanho dos seus sprites, ou todos são de tamanhos diferentes? Commented 12/05/2015 às 19:32

2 Respostas 2

0

Existe o grunt-spritesmith caso você use o Grunt para compilar teu SASS. O bom desta tarefa do Grunt é que ela gera um arquivo SASS com referência a todos os "pedaços" do sprite, fornecendo variáveis - que simplifica muito a manutenção do sprite no futuro (a remoção ou inserção de novos ícones será facilmente tratada com uma nova compilação dos arquivos SASS).

Para conhecer mais o pacote: https://github.com/Ensighten/grunt-spritesmith

Um bom tutorial para fazer a ferramenta funcionar (está em Less, mas é facilmente adaptável): http://emlyn.net/post/spritesmith-tutorial/

0

Dá pra usar maps e ao invés de fazer esse role todo de ifs e elseifs você apenas adiciona no map o novo ícone.

$sprites: (
  'bovino':     (0 -1px),
  'suino':      (0 -117px),
  'aves':       (0 -175px),
  'embutidos':  (0 -235px),
  'congelados': (0 -296px),
  'ovinos':     (0 -60px),
  'laticinios': (0 -355px)
);

%icon {
  display: inline-block;
  width: 55px;
  height: 55px;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-color: transparent;
}

@each $sprite, $pos in $sprites {
  .icon-#{$sprite} {
    @extend %icon;
    background-image: url(../img/icon-#{$sprite});
    background-position: $pos;
  }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .