How to parameterize colors in a CSS file to Sass variables?

Question

Background:

I bought a theme that unfortunately has no sass builtin and the colors has been hardcoded into a CSS file.

Problem

I want to make a scss file based on this file and parametrize the colors in there, so that I can experiment with different color palletes effortlessly.

Possible solution

I thought of doing a regex like the following and creating a colors dictionary, then replacing the colors by variables like $color1, $color2, ....

(background-color|background|border-color|border|color)\s*[:]\s*[^#]*(#[abcdef0-9]{3,6})

Any other ideas?

But I think there might be scripts out there built for this. Also, I might get better ideas here to do this, so I posted this question.

Answer 1

I don't want to sound obvious but can't you replace all color occurences with the variable name (IDEs have find and replace tools, much more practical than regexp) and then set the variable as the HEX you just replaced?

Once you have done this for all your colors (how many can they be for a single palette.. 3? 4?) you can change 4 values in the variables and try different palettes.