SCSS change variable depending on parent class?

Question

I have this problem, in my work we have a base project that contains thousands of lines of scss codes and several variables. When this base is needed just for a website all is ok, the development goes fast. I can change the $generalColor variable(s) and the correct color is applied.

The problem comes when somewhere, in the same project, a new set of Colors (variables) are needed (microsite). Then usually one need to search every place where $generalColor is used and add something like:

$generalColor_SOMETHING: #453543;
.newExtraSetOfColor & {
    background: $generalColor_SOMETHING;
}

And that for each variable * each new set of colors. If there are a lot of microsites/color sets it is a nightmare.

Is there a better way to this? (javascript like?)

Answer 1

它使用!global标志（SASS 文档）。

$theme-color: black;

.my-red-theme {
    $theme-color: red !global;
}