编译为CSS时如何覆盖SCSS变量 [英] How to overwrite SCSS variables when compiling to CSS

问题描述

我正在尝试使用基于SASS和COMPASS的jqtouch主题。我有一个最简单的代码，一个导入和一个要覆盖的变量的文件custom.scss：

I'm trying to use jqtouch theming which is based on SASS and COMPASS. I have a file custom.scss with the most simple code, one import and one variable to overwrite:

@import 'jqtouch';

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

当我现在将scss文件编译为css时，它基本上只会生成带有文件名的jqtouch css。尽管每个文档中的变量都是definitley正确的，但颜色规格却无处可见（官方指南），并在jqtouch.scss文件中导入该文件，以进行简单化。

When I now compile the scss file to css, it will basically just generate the jqtouch css with my filename. The color specification is nowhere to be seen, although the variable is definitley correct per documentation (Official Guide) and in the jqtouch.scss file, which I import for costumizing.

我正在运行Sass 3.2.9和Compass在Windows计算机上为0.12.2。

I'm running Sass 3.2.9 and Compass 0.12.2 on a Windows machine.

我尝试了使用更多变量和不同文件导入的方法，但结果始终是未合并我的替代值。

I've tried it with more variables and different file imports, but the result is always, that my override values are not incorporated.

指南针的红宝石配置文件似乎并不令人怀疑。

The ruby config file for compass seems to be unsuspicious.

有人知道这个地方出了什么问题吗？

Does anyone have an idea what goes wrong in the process so that my override values are ignored?

推荐答案

您要在之后设置颜色已被使用。基本上，您要这样做：

You're setting the color after it has already been used. Basically, what you're trying to do is this:

$color: red;

.foo {
    background: $color;
}

$color: green;

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

Depending on how jqtouch is written, you might not be able to modify the colors at all. You need the variables to be set as a default in order to overwrite them ahead of time:

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

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

所以您的代码应这样写：

So your code should be written as such:

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

@import 'jqtouch';

这篇关于编译为CSS时如何覆盖SCSS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！