best way to do sprites in SASS

Question

best way to do sprites in SASS

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm doing a sprite with sass as below, but I would like to know if this way is correct or not, or if there is a 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;
        }

    }

}

css sass

asked by anonymous 12.02.2015 / 19:35

2 answers

Self-resizing images with JQuery Mobile List directory names, from a given location, in a selectOneMenu

score 0 · Answer 1

There is grunt-spritesmith if you use Grunt to compile your SASS. The good thing about this Grunt task is that it generates an SASS file with reference to all the "pieces" of the sprite, providing variables - which greatly simplifies sprite maintenance in the future (removal or insertion of new icons will be easily handled with a new compilation of SASS files).

To learn more about the package: link

A good tutorial to make the tool work (it's in Less, but it's easily adaptable): link

score 0 · Answer 2

You can use maps and instead of doing that all of ifs and elseifs you just add map the new icon.

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