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 var更改为cla，然后重新编译以再次生成css.css然后我将其复制到cla.css。

我的问题是有一种自动化的方法，这样我就可以直接输出罗盘输出cba.css和cla.css，而不必每次都修改输入？

我还使用grunt来运行罗盘，这样可以提供更多选项。

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
• 为cla主题做同样的事。