How to overwrite SCSS variables when compiling to CSS

Question

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.*/

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.

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?

Answer 1

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;

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