How to quickly redistribute background-position?

Question

css

There is a huge file. I don't want to do it manually. Almost every line contains the following code:

.flag-at {
    background-position: 0 -528px
}

.flag-au {
    background-position: 0 -544px
}

.flag-aw {
    background-position: 0 -560px
}

.flag-ax {
    background-position: 0 -576px
}

All values ​​are in 16px increments. I need to make a step of 32px. How can this work be automated? Thanks

Answer 1

It was necessary to initially generate the sprite using Gulp and the problem would not have arisen. Or is there a source somewhere?
Well, I think you can make a string out of styles and find numbers in it using a regular expression and replace them with (x / 16) * 32
I don’t know how things like postcss work inside, look - maybe their implementation is even simpler.

Answer 2

Found a way. It is not very convenient, but for rare cases it will do:
We do autocorrect and get the following code:

@varib : 2;

.flag-at {
    background-position: 0 -528 * @varib;
}

.flag-au {
    background-position: 0 -544 * @varib;
}

.flag-aw {
    background-position: 0 -560 * @varib;
}

.flag-ax {
    background-position: 0 -576 * @varib;
}

Next, with the help of this site - convert less style to css