I'm finding several variables in SASS, defined in my *.scss theme file, that do not compile the correct CSS based on their name when building the application in Sencha Cmd using "sencha app build". All I want to do is have a default color, a default background-color, and a few other variations whenever an event occurs such as over, focus, pressed and disabled. And then make sure they apply to all components (form field, combo, grid cell, tree node, etc..). I found some examples below, and only a fraction of these SASS variables actually worked for me.
For the SASS variables that are broken in Sencha Cmd, what is the simplest way to apply themes for all components using standard Sencha functionality? And can you give a couple examples?
Example web pages that I found some SASS variables:
click any of the *.scss files to see the SASS variables
http://zachowen.wordpress.com/2012/09/10/custom-theming-for-extjs-4-part-1-buttons/
$border-radius: 0px,
$border-width: 3px,
$border-color: #900 #500 #500 #900,
$border-color-over: #A00 #700 #700 #A00,
$border-color-focus: #A00 #700 #700 #A00,
$border-color-pressed: #500 #900 #900 #500,
$border-color-disabled: #F6D600 #A66600 #A66600 #F6D600,
$padding: 3px 0,
$text-padding: null,
$background-color: #a00,
$background-color-over: #c00,
$background-color-focus: #c00,
$background-color-pressed: #700,
$background-color-disabled: #FEBF00,
$background-gradient: null,
$background-gradient-over: null,
$background-gradient-focus: null,
$background-gradient-pressed: null,
$background-gradient-disabled: null,
$color: #F6D600,
$color-over: null,
$color-focus: null,
$color-pressed: #100,
$color-disabled: #500,
$font-size: 11px,
$font-size-over: 11px,
$font-size-focus: 11px,
$font-size-pressed: 11px,
$font-size-disabled: 11px,
$font-weight: bold,
$font-weight-over: bold,
$font-weight-focus: bold,
$font-weight-pressed: bold,
$font-weight-disabled: bold,
$font-family: sans-serif,
$font-family-over: sans-serif,
$font-family-focus: sans-serif,
$font-family-pressed: sans-serif,
$font-family-disabled: sans-serif,
$icon-size: null
Looks like you're inventing some non-existing global SASS variables. I would suggest reading the Theming guide first, then taking a look at the components' documentation to see which SASS variables they support, and changing these variables to suit your needs either in a new theme, or in the application SASS.