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

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。颜色规范不可见，尽管变量在文档（官方指南）和导入进行自定义的jqtouch.scss文件中明确正确。

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

我尝试过使用更多的变量和不同的文件导入，但结果总是一样，即我的覆盖值未被合并。

Compass的ruby配置文件似乎没有问题。

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

- bouscher

---

事实证明，在导入文件（jqtouch.scss）中，变量的值被硬编码为颜色值。因此它们无法被覆盖。我只需将硬编码的值注释掉，然后就能设置自己的值了。 - bouscher

我曾经有一个类似的问题，并想出了自己的解决方案：在Sass中将命令行参数作为变量，用于编译时硬编码CDN URL。 - Dennis Burger

Answer 1

你是在已经使用颜色之后再设置它。基本上，你想做的是这样的：

$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';

- cimmanon

---

事实证明，在导入文件（jqtouch.scss）中，变量的值被硬编码为颜色值。因此它们无法被覆盖。我只需将硬编码的值注释掉，然后就能设置自己的值了。 - bouscher

我们是否在看同一个源代码？因为我正在查看的那个使用默认值：https://github.com/senchalabs/jQTouch/blob/master/themes/scss/include/_core.scss - cimmanon

不，我们没有。对此感到抱歉。我没有自己拉取源代码，也不知道有人动过手脚。但是请查看“apple”src文件。在这里覆盖$base-color将导致我正在处理的相同问题：https://github.com/senchalabs/jQTouch/blob/master/themes/scss/apple.scss - bouscher

_apple.scss文件没有被导入。Jqtouch.scss导入了includes/core，而includes/core又导入了animations、base和skeleton。 - cimmanon

但是在定义覆盖变量时先于第三方变量的唯一问题是，如果您想使用其他变量定义变量（例如$some-padding-var: $jqtouch-default-padding / 2;），则无法访问第三方变量。 - jbyrd