0

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.

Ehsan88
  • 3,569
  • 5
  • 29
  • 52

1 Answers1

0

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.

Shizon
  • 149
  • 7
  • Yeah. But I'm an automation-obsessed guy, (nowadays most people are), and if I want to do this in IDE, I have no better idea than either doing regex to find them in there (like in VS code) or going through all the lines. The current file has 905 lines! – Ehsan88 Sep 10 '20 at 13:57