如何在编译成 CSS 时覆盖 SCSS 变量

Question

我正在尝试使用基于 SASS 和 COMPASS 的

jqtouch

主题。我有一个文件

custom.scss

，其中包含最简单的代码，一个导入和一个要覆盖的变量：

@import 'jqtouch';

// Override variables
$base-color: #fe892a; /* The default base which is later used for toolbar, list, and button backgrounds.*/

当我现在将 scss 文件编译为 css 时，它基本上只会用我的文件名生成 jqtouch css。颜色规范无处可寻，尽管根据文档（官方指南）和我为 costumizing 导入的 jqtouch.scss 文件中变量绝对正确。

我在 Windows 机器上运行 Sass 3.2.9 和 Compass 0.12.2。

我已经尝试使用更多变量和不同的文件导入，但结果总是，我的覆盖值没有被合并。

compass 的 ruby 配置文件似乎没有可疑。

有没有人知道这个过程中出了什么问题，以至于我的覆盖值被忽略了？

Answer 1

你正在设置颜色after它已经被使用过。基本上，你要做的是：

$color: red;
    
.foo {
  background: $color;
}

$color: green;

根据

jqtouch

的书写方式，您可能根本无法修改颜色。您需要将变量设置为默认值，以便提前覆盖它们：

$color: green;
$color: red !default; // red is only used if $color is not already set

.foo {
  background: $color; // color is green
}

所以你的代码应该这样写：

// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/
    
@import 'jqtouch';