Sass，带有引导程序的配色方案答案

【问题标题】：Sass, color schemes with bootstrapSass，带有引导程序的配色方案
【发布时间】：2016-02-21 22:35:43
【问题描述】：

我读了这篇文章http://www.sitepoint.com/dealing-color-schemes-sass/，我想尝试应用该方法，但我有一个问题：可以将它与变量一起使用吗？

例如。我使用引导程序，我只想更改 $brand-primary 的值（不分配属性），我可以用这种方法更改这个值吗？

我已经在我的身体 ( 或 ) 上分配了一个动态类，我想为每个类更改一个 $brand-primary 值...

另一个例子。如果 body class 是 "en" $brand-primary: red;如果身体等级是“它” $brand-primary: blue; if body class 是 "fr" $brand-primary: green;

有可能吗？

感谢您的回复。

【问题讨论】：

【解决方案1】：

也许最简单的方法是创建一个 mixin，然后传入主题颜色变量。

主题混合代码采用所有必要的颜色，以及对应于主体类的名称：

@mixin theme($name, $brand-primary) {
  body.#{$name} {
    background-color: $brand-primary;
  }
}

创建一个单独的 Sass 部分来容纳您的主题颜色变量。在这种情况下，它看起来像这样：

$brand-primary: green;

根据您的主题创建尽可能多的这些文件。

使用主题就这么简单：

@import 'Themes/_theme-name.scss';
@include theme("theme-name", $brand-primary);

奖励 - 如果您需要将样式应用于特定主题，就像在 mixin 中的 @if 语句一样简单：

@if ($name == "theme-name") {
  .class-name {background-image: url(example.png);}
}

【讨论】：