Back to topic list

Spritesheet generator

Enduro.js has spritesheet generation built-in.

Save all sprites

Save all your sprites to assets/spriteicons. These sprites should be png and you also need to save a double sized sprite, with @2x added at the end of the name.

retina sprites

Include sass file

The spritesheet generation process will generate a .scss file that stores coordinates for each sprite. You have to include this file in your main.scss file. Use syntax below to include this file.

@import '../../_generated/_prebuilt/sprites';

Use the sprites

You can access the sprites with a convenient mixin @include retina-sprite($<original_file_name>);. This mixin will set the background image, its position and its size.

Credits to https://github.com/Ensighten/spritesmith, which enduro.js uses internally to provide support for retina sprites.

Back to topic list

Shout out to pexels and freepik