Blog Posted October 10, 2012

Icon Sprites with Compass

Manually creating sprite images is time-consuming and subject to human error. The corresponding CSS is often verbose and largely repetitive.

Solution: Leverage Compass's spriting and looping features.

Example: You have an icon set of 20 10x10px individual .png files. Their file names follow the convention icon_1.png, icon_2.png, and icon_3.png through icon_20.png.

Step 1: Install compass

1
gem install compass

Step 2: Create a compass project

1
compass create your_project_name

Step 3: Configure compass spriting

In the case of the aforementioned, example, you’ll want to configure compass to build a sprite from the directory containing the icons. In this case, I created an images/sprites/icons directory.

Place the icons in an images/sprites/icons/ directory within your compass project.

Create and/or edit your compass project’s scss/_sprite.scss file to build sprites from the newly created images/sprites/icons/ directory. Add the following:

1
2
3
$bit24-layout: smart
$bit24-sprite-dimensions: true
@import "images/sprites/icons/*.png"

Step 4: Write SCSS

The SCSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
@import "_sprite";
.icon {
  width: 20px;
  height: 20px;
  display: block;
  text-indent: -5000px;

  @for $i from 0 through 20 {
    &.icon-#{$i} {
      @include icons-sprite(icon_#{$i});
    }
  }
}

The resultant compiled CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// line 418, sprites/icons/*.png
.icons-sprite, .icon.icon-0, .icon.icon-1, .icon.icon-2, .icon.icon-3, .icon.icon-4, .icon.icon-5, .icon.icon-6, .icon.icon-7, .icon.icon-8, .icon.icon-9, .icon.icon-10, .icon.icon-11, .icon.icon-12, .icon.icon-13, .icon.icon-14, .icon.icon-15, .icon.icon-16, .icon.icon-17, .icon.icon-18, .icon.icon-19, .icon.icon-20 {
  background: url('/images/sprites/icons-sda260d590b.png') no-repeat;
}
.icon {
  width: 20px;
  height: 20px;
  display: block;
  text-indent: -5000px;
}
.icon.icon-0 {
  background-position: 0 -260px;
}
.icon.icon-1 {
  background-position: 0 -312px;
}
.icon.icon-2 {
  background-position: 0 -416px;
}
.icon.icon-3 {
  background-position: 0 -468px;
}
.icon.icon-4 {
  background-position: 0 -572px;
}
.icon.icon-5 {
  background-position: 0 -728px;
}
.icon.icon-6 {
  background-position: 0 -676px;
}
.icon.icon-7 {
  background-position: 0 -624px;
}
.icon.icon-8 {
  background-position: 0 -1144px;
}
.icon.icon-9 {
  background-position: 0 -1300px;
}
.icon.icon-10 {
  background-position: 0 -988px;
}
.icon.icon-11 {
  background-position: 0 -1248px;
}
.icon.icon-12 {
  background-position: 0 -1196px;
}
.icon.icon-13 {
  background-position: 0 -1664px;
}
.icon.icon-14 {
  background-position: 0 -1456px;
}
.icon.icon-15 {
  background-position: 0 0;
}
.icon.icon-16 {
  background-position: 0 -780px;
}
.icon.icon-17 {
  background-position: 0 -364px;
}
.icon.icon-18 {
  background-position: 0 -1508px;
}
.icon.icon-19 {
  background-position: 0 -1560px;
}
.icon.icon-20 {
  background-position: 0 -1716px;
}

Step 5: Write HTML

Now, the icon sprite styles can be leveraged in HTML like so:

1
<b class="icon icon-1">Some icon</b>