scss变量,在全局级别生成颜色

时间:2020-06-23 08:11:14

标签: css sass scss-mixins

我想允许我们的不同产品使用不同的颜色主题。所有主题都以相同的方式设置,因此,如果我可以根据他们选择的主题生成变量,那就太好了。

例如:

$theme: "crimson";

@mixin colors($theme) {
    $theme-00:  var(#{$theme+'-00'});
    $theme-10:  var(#{$theme+'-10'});
    $theme-20:  var(#{$theme+'-10'});
    $theme-30:  var(#{$theme+'-10'});
    $theme-40:  var(#{$theme+'-10'});
    $theme-50:  var(#{$theme+'-10'});
    $theme-60:  var(#{$theme+'-10'});
    $theme-70:  var(#{$theme+'-10'});
    $theme-80:  var(#{$theme+'-10'});
    $theme-90:  var(#{$theme+'-10'});
    $theme-100:  var(#{$theme+'-10'});
    $theme-110:  var(#{$theme+'-10'});
}

@include colors($theme);

上面的代码是用十六进制定义的颜色(例如):

$crimson-00: #FF0000;
$crimson-10: #FF0000;

all the way to 110..

我们所有的类都引用$ theme变量颜色,我想让产品通过简单地分配$theme: "blue"就可以在深红色主题和蓝色主题之间轻松切换,而后者将使用所有{例如{1}}。

谢谢!

0 个答案:

没有答案