Если говорить о таком поведении в реальном времени, то красиво будет сделать все на
кастомных свойствах, также известных, как CSS-переменные. Выглядит примерно так:
body.-red {
--my-color: #f00;
}
.test {
color: var(--my-color);
}
Добавляете класс "-red" к body и цвет текста в .text поменяется на красный. Главное преимущество этого подхода - нет полного дублирования селекторов. Главная проблема - работает это только в вечнозеленых браузерах и последнем Edge. Можете посмотреть
живой пример. Если нужна поддержка более старых браузеров, то идею для миксина для SASS вы можете подсмотреть в
этой статье.
Средний
