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, which enduro.js uses internally to provide support for retina sprites.

Back to topic list

Shout out to pexels and freepik