gpt4 book ai didi

angular - 基于类的 Scss 变量

转载 作者:行者123 更新时间:2023-12-04 16:03:53 25 4
gpt4 key购买 nike

我正在尝试为我的一个项目进行主题化,并且我使用 css 变量来实现相同的目的。我正在定义css变量如下

.theme-1 {
--var-1: #ffe;
--var-2: #000;
}

.theme-2 {
--var-1: #fff;
--var-2: #000;
}

在 html 中我应用了如下主题

<div [ngClass]="'theme-1'">
<!--content>

<-->
</div>

除了提到的 IE -11 之前不支持 css 变量之外,一切都很好用 Here .

问题

有什么方法可以用 scss 变量实现这一点,以便我可以定义全局变量并根据类更改值。

注意:我在我的项目中使用 Angular,因此我也必须担心 View 封装。如果可以通过默认封装实现答案,那就太好了。

提前致谢。

最佳答案

我个人更喜欢为此使用函数,但您也可以使用 mixin 来实现。

创建一个 map ,其属性绑定(bind)到与您拥有的主题一样多的值。
然后,定义一个自定义属性来获取此 map 并返回所需的值。

$theme: (
color: (#000, #FFF),
border: (dashed, solid),
// etc.
);

@function theme($property, $index) {
@return nth(map-get($theme, $property), $index);
}

.light.foo {
color: theme(color, 1);
}

.dark.foo {
color: theme(color, 2);
}

Demo SassMeister

关于angular - 基于类的 Scss 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53012603/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com