CSS Sprite Generator: I have the bundled image

I have an image which I want to use as a sprite. Let's say the image has r x c rectangles of the same size which are to be use开发者_Go百科d as backgrounds. Given the dimensions in the following image, how could we generate css for containers with classes R1C1 through to RnCm? The symbols used are defined below the image.

OH = Outer Height, OW = Outer Width,

IH = Inner Height, IW = Inner Width,

VG = Vertical Gutter, HG = Horizontal Gutter

P.S. I am not sure if I have used VG and HG correctly or they should be swapped in the image, please ignore this if the latter is the case.

---

I found this tutorial, which explains the technique in very simple terms and in a step-by-step manner. I will use it and build a tool. Then I'd share it here.

P.S. I would still accept an answer if it provides concrete help and guidance.

---

Maybe you can try a CSS sprite generator. I haven't tried this one myself but it should accept any ammount of images and output the right sprite and CSS code.

---

CSS isn't dynamic, so unless you're opposed to hand-writing each rule or using a tool like Dreamweaver ... you may want to consider using a dynamic CSS framework language like LESS or SASS to help generate your initial styles.