文章/答案/技术大牛

发布

问基于类的Scss变量
EN

Stack Overflow用户

提问于 2018-10-26 16:09:41

回答 2查看 6.8K关注 0票数 3

我正试图为我的一个项目做主题化，我的是，使用了相同的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>

一切都很好，除了css-变量直到IE-11才被支持，正如前面提到的这里。

问题

有任何方法可以用scss变量来实现这一点，这样我就可以定义全局变量并根据class .更改值。

备注：我在我的项目中使用了角，因此我也不得不担心视图封装。如果这个答案可以通过默认封装来实现，那就太好了。

提前谢谢。

sass

css-variables

scss-mixins

angular

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-26 17:07:43

我个人更喜欢为此使用一个函数，但是你也可以用一个混音来实现它。

创建一个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);
}

演示SassMeister

票数 6

Stack Overflow用户

发布于 2018-10-26 19:42:59

由于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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53012603

复制

相似问题

问基于类的Scss变量
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于类的Scss变量EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于类的Scss变量
EN