74

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?

Abraham
  • 8,525
  • 5
  • 47
  • 53
bouscher
  • 1,300
  • 1
  • 9
  • 18
  • 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. – bouscher Nov 28 '14 at 16:01
  • 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](http://stackoverflow.com/a/31406151/2563782) – Dennis Burger Jul 14 '15 at 12:19

1 Answers1

125

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';
Abraham
  • 8,525
  • 5
  • 47
  • 53
cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • Unfortunately this is not it, of course your setup was how I started out, but it also does not work for me. – bouscher Jun 13 '13 at 14:59
  • 1
    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. – bouscher Jun 13 '13 at 15:20
  • Are we looking at the same source? Because the one I'm looking at uses defaults: https://github.com/senchalabs/jQTouch/blob/master/themes/scss/include/_core.scss – cimmanon Jun 13 '13 at 15:24
  • 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: https://github.com/senchalabs/jQTouch/blob/master/themes/scss/apple.scss – bouscher Jun 13 '13 at 15:28
  • The _apple.scss file isn't being imported. Jqtouch.scss imports includes/core, which in turn imports animations, base, and skeleton. – cimmanon Jun 13 '13 at 15:42
  • I know, what I meant was, if someone used "@import 'apple'" to customize the shipped theme 'apple' (like it is suggested here: https://github.com/senchalabs/jQTouch/wiki/Theming), he/she would run into the same issue. – bouscher Jun 13 '13 at 15:46
  • 2
    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;` – jbyrd Jul 10 '15 at 00:13