Change every same css property in a css file-CodePudding

In my CSS file, I have more classes and ids for the same color. I mean about "same color" is a visual thing.so, it can be "color" property also "background-color" and ".class:hover".

so same thing is a word like #33453

I want to change all #33453 in a CSS file with jquery. How can I do it?

my css file likes that:

<style>
.button-color, .button-border {
color:red;
border-color:#33453;
}

#background-color, button-background-color:hover {
background-color:#33453
}
</style>

I just found this:

$("body").children().each(function () {
    $(this).html( $(this).html().replace(/@/g,"$") );
});

it is so smilar what I want but how can I change "body" selector with css file?

CodePudding user response：

CSS Variables to the rescue!

You can create CSS variables, whcih can be referenced throughout your stylesheet.

Write a root: at the start of your stylesheet. And then '--' at the front of your variable name.

:root {
  --main-color: #33453;
}

Then in your stylesheet you can reference the CSS variable with var().

.button-color, .button-border {
  color:red;
  border-color: var(--main-color);
}

#background-color, button-background-color:hover {
  background-color: var(--main-color);
}

You can also change this variable in a cascading way. So if you have...say...a "dark" section you can also add

.dark {
  --main-color: white;
}

And now anything with main-color inside of .dark will be different.