Results 1 to 3 of 3

Thread: Ext JS Theming question, redefining theme vars in the application style definition

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290

    Default Ext JS Theming question, redefining theme vars in the application style definition

    I'm trying to make some changes to the theme for my application and I'm running into an error during the build that I don't quite understand. I've created a custom theme for my application which extends Neptune. As part of the theme, I created a new SASS variable called $company-base-color and I added it to the packages/my-theme/sass/var/Component.scss file. The definition looks like this:

    $company-base-color: #37617a !default;

    I want to make use of this variable in my application specific styling to use as a basis for other settings. I have a sass/var/view/Main.scss file which contains different variable settings. One of them looks like this:

    $special-label-color: $company-base-color;

    I was thinking that since the $company-base-color was defined in my theme, I would be able to reference the color variable in my application styles. However, when I try to do a build, I get an error which says this:

    [INF] executing compass using system installed ruby runtime
    error MyApp-all.scss (Line xx of ../../../../../sass/var/view/Main.scss: Undefined variable: "$company-base-color".)

    followed by a 'BUILD FAILED' message.

    I can work around this issue but I'm curious as to what I'm doing wrong. Basically I want to create one or more SASS variable definitions (mostly related to color) in my theme and either reference or override them in my application.

    Any help would be greatly appreciated.

    Jim

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290

    Default

    Ok, further reading of the Theming documentation sort of clears this up, I think. As I read it, your application defines one or more variables and then you actually work *up* the theme hierarchy. Any variable defined in the Application will maintain its definition unless it has the same name as one up the tree. If the one further up the tree has !default, the Application value will take precedence, otherwise the higher element in the theme tree will rule. So, rather than thinking that the theme defines a variable which can be overridden by the Application, it's more like the other way around, if I'm reading the documentation correctly. That is why the compiler is complaining about my variable, I'm trying to reference a definition which doesn't exist. I just verified this with $base-color. If my Application scss file has a definition like this:

    $foo: $base-color;

    I'll get a compiler error. However, I can set $base-color just fine and then reference it. I understand the logic, although it would be nice if there was a way to define some constants at the theme level that could be referenced by the application style sheet.

    Jim

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290

    Default

    A little more reading (and thinking about what I'm reading) pointed me to the 'etc' directory under Sass. Since etc is processed first, I can put 'global' definitions in there which will be available in my application 'var' files. Now things make a little more sense. I had completely forgotten about the 'etc' directory. I think my understanding is complete.

    Jim

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •