Question

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

除the documentation所述的IE -11之前，不支持css变量，否则一切工作都很好。

问题

是否可以使用scss变量来实现此目的，以便我可以定义全局变量并根据类更改值。

注意：我在项目中使用的是angular，因此我也不得不担心视图封装。如果答案是默认的封装，那就太好了。

先谢谢了。

Answer 1

我个人更喜欢为此使用一个函数，但是您也可以使用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);
}

Demo SassMeister

Answer 2

由于SASS是自上而下编译的，因此您可以重新定义每个主题的变量，并复制通用样式，这些样式将被编译为使用正确的变量值。

_dark-theme.scss

// Variables for dark theme
$background-color: #333;
$color: #fff;

_light-theme.scss

// Variables for light theme
$background-color: #eee;
$text-color: #333;

_common-styles.scss

// Styles used across all themes, uses theme variables
body {
    background: $background-color;
    color: $text-color;
}

main.scss

.dark-theme {
    @import "dark-theme";
    @import "common-styles";
}

.light-theme {
    @import "light-theme";
    @import "common-styles";
}

然后在html的顶层使用所需的主题类。

<body class="dark-theme">
    ...
</body>

基于类的Scss变量

2 个答案: