Compass/Sass -输出两个不同主题的CSS文件

Question

我有两个不同的网站，除了配色方案之外基本上是相同的，我使用SCSS生成相关的CSS，如下所示:

$ui-theme: 'cba';
// CBA CORPORATE COLOURS
$cba_red:#C60750 !global;
$cba_green:#15AAB5 !global;
$cba_blue:#3B4358 !global;
// CLA CORPORATE COLOURS
$cla_red:#EE5E36 !global;
$cla_green:#CBDB2A !global;
$cla_blue:#00ACDC !global;
// SWITCH COLOUR THEME
@if $ui-theme == "cla" {
  $red:   $cla_red;
  $green: $cla_green;
  $blue:  $cla_blue;
} @else {
  $red:   $cba_red;
  $green: $cba_green;
  $blue:  $cba_blue;
}
// SCSS then follows, using $red, $green and $blue vars as appropriate

SCSS编译为css.css，然后复制到cba.css，将$ui-theme变量更改为cla，然后重新编译为css.css，然后将其复制到cla.css。

我的问题是有一种方法来自动化这一点，这样我就可以使指南针输出cba.css和cla.css直接，而不需要我每次修改输入?

我也使用grunt来运行compass，这样可以提供更多的选择。

Answer 1

您可以这样做:

• 在你的主scss文件中，用@import colors.scss
替换你所呈现的代码

• 创建2个文件cba.scss和cla.scss，仅使用该主题的颜色定义-例如cla.scss:

  $red:   #EE5E36 !global;
  $green: #CBDB2A !global;
  $blue:  #00ACDC !global;
  

• 在grunt中，生成cba主题:

  1. 复制cba.scss到color.scss
  2. 调用sass编译main.scss
• 对类主题做同样的操作。