Question

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

例如：

$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}}。

谢谢！

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

0 个答案: