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

Question

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

实施例。我使用bootstrap并且我只想为$ brand-primary更改值（不指定属性），我可以使用此方法更改此值吗？

我已经为我的身体（或）分配了一个动态课程，我想为每个班级更改一个$ brand-primary值......

另一个例子。 如果身体类是＆＃34; en＆＃34; $ brand-primary：红色;如果身体类是＆＃34;它＆＃34; $ brand-primary：blue;如果身体类是＆＃34; fr＆＃34; $ brand-primary：green;

可能吗？

感谢您的回复。

Answer 1

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

主题mixin代码包含所有必要的颜色，以及与body类相对应的名称：

@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);}
}