39Spriting with Eyeglass

Spriting is a process by which many small icons or pictures are turned into one larger one for use in a website. The one larger file is not the direct sum of its parts—its file size is a lot smaller than the separate images combined. This is of supreme importance in the age of the mobile web, where every KB counts.

There’s a special Eyeglass module for spriting images. In a project, just install it using the command seen in the example.

Once the module has installed, you can import the spriting module in your Sass file—which you can see in the example. As images are being used, you need to instruct Eyeglass to be ready to handle assets. You do that by importing "assets".

You can then tell Eyeglass to create a map ...

Get Pragmatic Guide to Sass 3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.