CSS sprite jako v Compassu se Spritesmith

Jak jsem již dříve ve článku Compass-like mixins psal, Compass je out a měl by se nahradit moderním Autoprefixerem. Pokud tedy upravuji starší projekt, místo instalace Ruby a Compassu se vždy vše snažím nahradit čistým Sassem. Nedávno jsem se ale zasekl na CSS sprite. Naštěstí balík Spritesmith mě zachránil. 

Spritesmith nezná hranic

Balíček lze použít v Gruntu i Gulpu a kromě výsledného obrázku vygeneruje také informace o rozmístění. Takový výstup může být ve formátu CSS, Scss/Sass, Less, Stylus, JSON či úplně vlastním konfigurovatelným pomocí šablon v Handlebars.

Protože Spritesmith toho nabízí opravdu hodně, tento návod se věnuje jen nutnému nastavení pro migraci ze zastaralého Compassu a to v Gruntu.

Migrace z Compassu

Jako první je samozřejmě nutné nainstalovat balíček pomocí npm i grunt-spritesmith a následně nakonfigurovat Gruntfile.js

sprite:{
    all: {
        src: 'images/icon/*.png', // Zdrojová složka s obrázky
        dest: 'images/icon-sprite.png', // Výsledný spojený
        destCss: 'sass/base/_sprite.scss', // Vygenerovaný Sass soubor
        imgPath: '../images/icon-sprite.png', // Cesta v Sass souboru k obrázku
        algorithm: 'top-down', // Algoritmus pro rozmisťování obrázků
        cssTemplate: 'sass/handlebarsStr.scss.handlebars' // Vlastní šablona
    }
},

Většina nastavení snad nepotřebuje další komentář, až na poslední položku cssTemplate. Pro všechny zmíněné výstupní formáty je samozřejmě výchozí šablona připravena. Protože ale požadavek je nahrazení Compassu bez zbytečného přepisování celého CSS, je zde využita vlastní šablona. Soubor je formátován pomocí handlebars a obsauje následující:

{
  // Default options
  'functions': true,
  'variableNameTransforms': ['dasherize']
}

{{#block "sprites"}}
{{#each sprites}}
$sprite_{{strings.name}}: ({{px.x}}, {{px.y}}, {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}', '{{name}}', );
{{/each}}
{{/block}}
{{#block "spritesheet"}}
${{spritesheet_info.strings.name_sprites}}: ({{#each sprites}}$sprite_{{strings.name}}, {{/each}});
${{spritesheet_info.strings.name}}: ({{spritesheet.px.width}}, {{spritesheet.px.height}}, '{{{spritesheet.escaped_image}}}', ${{spritesheet_info.strings.name_sprites}}, );
{{/block}}

.icon-sprite{{#each sprites}}, .icon-{{strings.name}} {{/each}}{
    background-image: url('{{{spritesheet.escaped_image}}}');
    background-repeat: no-repeat;
}

{{#each sprites}}.icon-{{strings.name}}{
    background-position: {{px.offset_x}} {{px.offset_y}};
    height: {{px.height}};
    width: {{px.width}};
}
{{/each}}

Výsledný připravený Scss soubor, který je zpětně kompatibilní s tím, co generoval Compass může vypadat třeba takto:

$sprite_arrow: (0px, 5px, 0px, -5px, 5px, 6px, 25px, 84px, '../images/icon-sprite.png', 'arrow', );
$sprite_dropdown: (0px, 0px, 0px, 0px, 25px, 5px, 25px, 84px, '../images/icon-sprite.png', 'dropdown', );
$sprite_email: (0px, 11px, 0px, -11px, 12px, 9px, 25px, 84px, '../images/icon-sprite.png', 'email', );
$spritesheet-sprites: ($sprite_arrow, $sprite_dropdown, $sprite_email, );
$spritesheet: (25px, 84px, '../images/icon-sprite.png', $spritesheet-sprites, );

.icon-sprite, .icon-arrow , .icon-dropdown , .icon-email {
    background-image: url('../images/icon-sprite.png');
    background-repeat: no-repeat;
}

.icon-arrow{
    background-position: 0px -5px;
    height: 6px;
    width: 5px;
}
.icon-dropdown{
    background-position: 0px 0px;
    height: 5px;
    width: 25px;
}
.icon-email{
    background-position: 0px -11px;
    height: 9px;
    width: 12px;
}

Nyní již stačí spustit kompilaci pomocí Sassu libovolným způsobem a veškeré použití z dřívějších dob Compassu bude fungovat.

---

O své zkušenosti se sprity se můžete podělit v komentářích