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?

Fazeli

As it turns out in the import file (jqtouch.scss) the values of the variables were set hard coded to color values. Thus they couldn't be overwritten. I just commented the hard coded values out and was then able to set my own values. – Fazeli

I had a similar question and came up with my own solution: Command-line argument as var in Sass, for hardcoded CDN URL's on compile – Hazan

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

Stalder

Unfortunately this is not it, of course your setup was how I started out, but it also does not work for me. – Fazeli

As it turns out in the import file (jqtouch.scss) the values of the variables were set hard coded to color values. Thus they couldn't be overwritten. I just commented the hard coded values out and was then able to set my own values. – Fazeli

Are we looking at the same source? Because the one I'm looking at uses defaults: github.com/senchalabs/jQTouch/blob/master/themes/scss/include/… – Stalder

No we don't. Sry for that. I didn't pull the source myself and had no idea someone fiddled with it. But have a look at the 'apple' src file. Overriding the $base-color here will cause the same issue I was dealing with: github.com/senchalabs/jQTouch/blob/master/themes/scss/… – Fazeli

The _apple.scss file isn't being imported. Jqtouch.scss imports includes/core, which in turn imports animations, base, and skeleton. – Stalder

I know, what I meant was, if someone used "@import 'apple'" to customize the shipped theme 'apple' (like it is suggested here: github.com/senchalabs/jQTouch/wiki/Theming), he/she would run into the same issue. – Fazeli

But the only problem with defining your override variables before the 3rd-party variables is that you then don't have access to the 3rd-party variables, in the case that you want to define variables using other variables - for example $some-padding-var: $jqtouch-default-padding / 2; – Placencia