时间戳

首页 > 解决方案 > 基于类的 Scss 变量

angular - 基于类的 Scss 变量

问题描述

我正在尝试为我的一个项目进行主题化，并且我正在使用 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 变量。

问题

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

注意：我在我的项目中使用 angular，因此我也必须担心视图封装。如果可以通过默认封装来实现答案，那就太好了。

提前致谢。

标签： angularsasscss-variablesscss-mixins

解决方案

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

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

$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);
}

演示 SassMeister

推荐阅读