Generate Icon Classes from Sprite Using SASS

While we mostly use sass for it's variables, nesting and mixins, the language itself is way more powerful. A lot of features may not be used on your everyday site, but there are times when they come in handy. Let's take a look on how one would approach automatic class generation for any grid based sprites and how this could vastly shorten your code.

A little heads up: this won't be very useful with shorthand, no-braces sass syntax (.sass) since it doesn't support multi-line lists. For this reason all code below will actually be SCSS.

What we will be making

We will write a SASS mixin that will take a list of icons we specify and then create a set of classes for us to use in HTML. The purpose of this exercise is to learn more about SASS - it's built in functions, constructs and advanced use of variables.

Let's go.

Basic information about sprite

This is the simplest use of SASS variables - holding single value. First we create a configuration section for our generator.

1$class-prefix: "custom-icon--";
2$sprite-image-url: "images/sprite.png";
3$sprite-grid-size: 20px;

With this configuration we are letting SASS know that our sprite is located in images/sprite.png and is made up of 20px by 20px grid. We also want all our classes to be prefixed with custom-icon--, ie. custom-icon--settings.

General icon styles

Now that we know how generated classes will be named, we apply some styling to all icons:

1[class*='#{$class-prefix}'] {
2    display: inline-block;
3    width: $sprite-grid-size;
4    height: $sprite-grid-size;
5
6    line-height: $sprite-grid-size;
7
8    background-image: url(#{$sprite-image-url});
9    background-repeat: no-repeat;
10}

Styles for single icon

We are going to use a small mixin, that will take $row and $column at which the icon is positioned in sprite and appropriately move icon's background. To simplify, we assume that rows and columns are 0-indexed.

1@mixin icon($row, $column) {
2    background-position: -$column*$sprite-grid-size -$row*$sprite-grid-size;
3}

Because each cell of our grid has equal height and width, we can get away with this fairly simple code. If that was not the case, like when we would need to specify custom offsets for each icon, we could refactor this logic into a function, for example:

1@function getPosition($move, $amout, $offset) {
2    @return (-$move * $amount) + $offset;
3}

List of icons

Variables in SASS can contain lists of values separated by either spaces or commas and optionally surrounded by parenthesis. Thanks to that we can create a simple data structure that will hold information about an icon:

1$icon: ("<name>", <row>, <column>)

Extending this idea let`s us create a list of similar data structures that would describe all icons we want to define:

1$icon-list: (
2    ("settings", 0, 0)
3    ("account", 0, 1)
4    ("mail", 1, 0)
5    ("picture", 1, 1)
6);

Please note that in this case, the outermost parenthesis are not optional.

Creating icons

We'll write a snippet that will iterate over all icons in $icon-list, pluck variables from it, create a class and call icon mixin to style it.

1@each $icon in $icon-list {
2    // pluck $icon variables
3    $name: nth($icon, 1);
4    $row: nth($icon, 2);
5    $column: nth($icon, 3);
6
7    // create class
8    .#{$class-prefix}#{name} {
9        // style it
10        @include icon($row, $column);
11    }
12}

We need to use built-in nth function to tell sass which value form list we want, because, sadly, there are no associative lists/arrays yet.

Wrapping it all together

SASS lets us refactor a lot of repeatable code into a single list. Utilizing lists, nth, @each and mixins we were able to significantly reduce the number of code lines. Still, there is a lot room for improvement - we could account for different size icons, not square grid, scoping variables to reuse the code inside @each to create many sets of icons and so on.

Main point of this post is that SASS is so much more than just CSS that allows nesting and that we shouldn`t miss out on these exciting features.

Complete listing of code:

1$class-prefix: "custom-icon--";
2$sprite-image-url: "images/sprite.png";
3$sprite-grid-size: 20px;
4
5$icon-list: (
6    ("settings", 0, 0)
7    ("account", 0, 1)
8    ("mail", 1, 0)
9    ("picture", 1, 1)
10);
11
12@mixin icon($row, $column) {
13    background-position: -$column*$sprite-grid-size -$row*$sprite-grid-size;
14}
15
16[class*='#{$class-prefix}'] {
17    display: inline-block;
18    width: $sprite-grid-size;
19    height: $sprite-grid-size;
20
21    line-height: $sprite-grid-size;
22
23    background-image: url(#{$sprite-image-url});
24    background-repeat: no-repeat;
25}
26
27
28
29@each $icon in $icon-list {
30    $name: nth($icon, 1);
31    $row: nth($icon, 2);
32    $column: nth($icon, 3);
33
34    .#{$class-prefix}#{name} {
35        @include icon($row, $column);
36    }
37}