Есть функция или миксин для оформления сайта в нескольких цветовых гаммах?

Question

[Макс Жуков]

Вижу вариант как сделать это. Это добавить в body класс например "style_theme_1" и где-то на страницы для этого применяется один цвет для ul,p ... одна цветовая схема, если поменяю на "style_theme_2", то будут другие цвета. И мне нужно решение. К примеру чтобы в css формировалось несколько строк с указанными мною цветами в sass для данного элемента

Answer 1

[Ivan Bogachev]

Если говорить о таком поведении в реальном времени, то красиво будет сделать все на кастомных свойствах, также известных, как CSS-переменные. Выглядит примерно так:

body.-red {
    --my-color: #f00;
}

.test {
    color: var(--my-color);
}

Добавляете класс "-red" к body и цвет текста в .text поменяется на красный. Главное преимущество этого подхода - нет полного дублирования селекторов. Главная проблема - работает это только в вечнозеленых браузерах и последнем Edge. Можете посмотреть живой пример. Если нужна поддержка более старых браузеров, то идею для миксина для SASS вы можете подсмотреть в этой статье.