Вы не можете установить переменные CSS в картах напрямую, потому что эта переменная не будет скомпилирована в данный момент, так как SASS является препроцессором, кроме того, начальная загрузка запускает и конвертирует эти тематические KVP в :rootпеременные в любом случае, так что вы по существу делаете одно и то же дважды.Одним из способов решения этой проблемы является то, что вы можете просто подключиться к самой карте с помощью общих SASS методов:
...
property: map-get(map-merge($theme-colors,($key : $color)),$key)
...
После того, как вы установили этот конкретный KVP, он будет доступен для использования в других местах.
На данный момент, произвольно использовать CSS var(), но просто для того, чтобы охватить все мои базы, вы можете установить тему, а затем изменить переменную, в отличие от переустановки и вызова theme-color("color-2"),
Полный пример этого будет следующим:
@import "bootstrap";
$theme-colors: (
"primary": #001122,
"color-1": black,
"color-2": black,
"color-3": black
);
@function set-theme-color($key, $color) {
@return map-get(map-merge($theme-colors,($key : $color)),$key);
}
@mixin theme($color1, $color2, $color3) {
background-color: set-theme-color("color-1", $color1);
h1 {
color: set-theme-color("color-2", $color2);
}
h2 {
color: set-theme-color("color-3", $color3);
}
}
main {
&.theme-purple {
@include theme(purple,cornflowerblue,white);
/* example demonstrating color3 can change */
--color-3: orange;
}
&.theme-red {
@include theme(red,black,white);
}
}
h2 {
color: theme-color("color-2");
}
h3 {
/* example demonstrating color3 changed */
color: var(--color-3);
}
<script src="http://codeply.com/js/embed.js"></script><div data-codeply="o9n2ST6HW5" ></div>
Обратите внимание, пример также демонстрирует, если одна тема устанавливает переменную, а другая - нет.Выбранный вами цвет темы недействителен, и свойство возвращается к наследованию.
codeply demo