1 ddc03123 2020-03-28 op CSS sprites are a nice idea, stolen from the game developers I think,
 2 ddc03123 2020-03-28 op that consist to merge all the images you need in a single one and
 3 ddc03123 2020-03-28 op download only that. I will not prove that it's best than downloading
 4 ddc03123 2020-03-28 op *n* images, but it should clear that downloading a file, albeit a bit
 5 ddc03123 2020-03-28 op bigger, requires less TCP segments going back and forth.
 6 ddc03123 2020-03-28 op 
 7 ddc03123 2020-03-28 op The other day I needed a CSS sprite. Being the lazy person I am, right
 8 ddc03123 2020-03-28 op after The GIMP was open I thought that I didn't want to do the math.
 9 ddc03123 2020-03-28 op 
10 ddc03123 2020-03-28 op After a bit of searching, I found a post where the author wrote a
11 ddc03123 2020-03-28 op script to generate the sprites (and the relative css file) with image
12 ddc03123 2020-03-28 op magick. I have lost that link, and the history of my browser doesn't
13 ddc03123 2020-03-28 op help. I remember that the domain name contains "php", but nothing
14 ddc03123 2020-03-28 op more. However, I rewritten the script, so it better fits my needs.
15 ddc03123 2020-03-28 op 
16 ddc03123 2020-03-28 op The idea is to join all the image using `convert(1)` and then generate
17 ddc03123 2020-03-28 op a CSS file with the offsets using `identify(1)`. Both programs should
18 ddc03123 2020-03-28 op come along with imagemagick.
19 ddc03123 2020-03-28 op 
20 ddc03123 2020-03-28 op Here's the script
21 ddc03123 2020-03-28 op 
22 a3ab6f61 2020-09-22 op ```sh
23 a3ab6f61 2020-09-22 op #!/bin/sh
24 ddc03123 2020-03-28 op 
25 a3ab6f61 2020-09-22 op convert sprites/* -append img/sprites.png
26 ddc03123 2020-03-28 op 
27 a3ab6f61 2020-09-22 op for i in sprites/*; do
28 a3ab6f61 2020-09-22 op 	identify -format '%W %H %f\n' $i
29 a3ab6f61 2020-09-22 op done | awk '
30 a3ab6f61 2020-09-22 op function fname(path) {
31 a3ab6f61 2020-09-22 op 	sub (".png", "", path)
32 a3ab6f61 2020-09-22 op 	return path
33 a3ab6f61 2020-09-22 op }
34 ddc03123 2020-03-28 op 
35 a3ab6f61 2020-09-22 op BEGIN {
36 a3ab6f61 2020-09-22 op 	y = 0
37 ddc03123 2020-03-28 op 
38 a3ab6f61 2020-09-22 op 	print "%sprite-base {"
39 a3ab6f61 2020-09-22 op 	print "	background-image: url(/img/sprites.png);"
40 a3ab6f61 2020-09-22 op 	print "	background-repeat: no-repeat;"
41 a3ab6f61 2020-09-22 op 	print "}"
42 a3ab6f61 2020-09-22 op 	print ""
43 a3ab6f61 2020-09-22 op }
44 ddc03123 2020-03-28 op 
45 a3ab6f61 2020-09-22 op {
46 a3ab6f61 2020-09-22 op 	width = $1
47 a3ab6f61 2020-09-22 op 	height = $2
48 a3ab6f61 2020-09-22 op 	class = fname($3)
49 ddc03123 2020-03-28 op 
50 a3ab6f61 2020-09-22 op 	print "%sprite-" class " {"
51 a3ab6f61 2020-09-22 op 	print "	@extend %sprite-base;"
52 a3ab6f61 2020-09-22 op 	if (y == 0)
53 a3ab6f61 2020-09-22 op 		print "	background-position: 0 0;"
54 a3ab6f61 2020-09-22 op 	else
55 a3ab6f61 2020-09-22 op 		print "	background-position: 0 -" y "px;"
56 a3ab6f61 2020-09-22 op 	print "}"
57 a3ab6f61 2020-09-22 op 	print ""
58 ddc03123 2020-03-28 op 
59 a3ab6f61 2020-09-22 op 	y += height;
60 a3ab6f61 2020-09-22 op }
61 a3ab6f61 2020-09-22 op ' > scss/_sprites.scss
62 a3ab6f61 2020-09-22 op ```
63 ddc03123 2020-03-28 op 
64 ddc03123 2020-03-28 op Assuming that the images are within `sprites/` and all of them are png
65 ddc03123 2020-03-28 op files, this script will generate the sprite in `img/sprites.png` and a
66 ddc03123 2020-03-28 op SASS file in `sass/_sprits.scss` with one placeholder for every image
67 ddc03123 2020-03-28 op (the naming scheme is `%sprite-$NAMEFILE` with the `$NAMEFILE` being
68 ddc03123 2020-03-28 op the file name without extension).
69 ddc03123 2020-03-28 op 
70 ddc03123 2020-03-28 op It should be trivial to edit to handle pure CSS output, and eventually
71 ddc03123 2020-03-28 op other image formats.