Question

Lets say I wrote a simple CSS rule like this:

.star_10 {
  background: url(stars.png) no-repeat 0 0;
}

And I need 10, so I copied it 9 times.

.star_10 {
  background: url(stars.png) no-repeat 0 0;
}
.star_10 {
  background: url(stars.png) no-repeat 0 0;
}
.star_10 {
  background: url(stars.png) no-repeat 0 0;
}
.star_10 {
  background: url(stars.png) no-repeat 0 0;
}
.star_10 {
  background: url(stars.png) no-repeat 0 0;
}

etc.

Now I want to change the star_10 and 0 0 with incremented values so it looks like this:

.star_10 {
  background: url(stars.png) no-repeat 0 0;
}
.star_9 {
  background: url(stars.png) no-repeat 0 -18px;
}
.star_8 {
  background: url(stars.png) no-repeat 0 -36px;
}
.star_7 {
  background: url(stars.png) no-repeat 0 -54px;
}

and so on…

So how can I search/replace every instance, do a calculation and write it?

Answer 1

You can do it easily with a macro. Lets say you have only this:

.star_10 {
  background: url(stars.png) no-repeat 0 0;
}

Place your cursor over the first dot (in .star10) and type the following in normal mode:

qa3yy3jp^Xjt;18^Xk0q

Explaining:

1. qa will start a macro recording in register “a”.
2. 3yy will yank (copy) the following 3 lines.
3. 3j will place the cursor 3 lines down.
4. p will paste the past yanked text.
5. ^X (ctrl+x) will decrement the star class number.
6. j will place your cursor one line down.
7. t; will place your cursor before the next ; in the current line.
8. 18^X will decrement the y coordinate of backround by 18;
9. k will put the cursor one line up,
10. 0 will put the cursor at the beggining of the line.
11. q will finish the macro recording.

After that, you may have something like this.

.star_10 {
  background: url(stars.png) no-repeat 0 0;
}

.star_9 {
  background: url(stars.png) no-repeat 0 -18;
}

That’s it. Just place your cursor at the dot on .star_9 and press 8@a to execute the macro recorded in register a eight more times.