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 来运行 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
• 对 cla 主题执行相同的操作。