Как быстро перераспределить background-position?

Question

[Александр Шаповал]

Есть огромный файл. В ручную делать не хочу. Почти на каждой строчке содержится такой код:

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

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

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

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

Все значения указаны с шагом 16px. Мне же надо сделать шаг 32px. Как можно автоматизировать эту работу? Спасибо

Answer 1

[Андрей Хохлов]

Надо было изначально генерировать спрайт с помощью Gulp и проблемы бы не возникло. Или может все же где-то есть исходники?

Ну а так я думаю можно сделать из стилей строку и на любом ЯП найти по регулярке в ней цифры и заменить на (x/16)*32

Не знаю как внутри работают такие вещи как postcss, посмотрите - может их реализация ещё проще.

Answer 2

[Александр Шаповал]

Нашел способ. Он не совсем удобный, но для редких случаев сойдет:

Делаем автозамены и получаем такой код:

@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;
}

Далее при помощи этого сайта - преобразуем less стиль, в css