Is it possible to override SASS files for specific components in Sencha Touch?

Question

Is it possible to override SASS files for specific components in Sencha Touch? The way one would do it for ExtJS project?

Answer 1

Sure you can. You can

• create a custom component
• add a class to the component (e.g. 'x-my-button')
• add the new class with the deeper classes to the SASS

.x-my-button { &.x-button { .x-button-label{ color: green; } } }

Other than that you can change the styles by:

• http://docs.sencha.com/touch/2.4/apidocs/#!/api/Ext.Button
• hover over CSS Vars and choose the one you need to change
• inside the app.sass add the var first thing in the file.

OR go for global css vars:

• http://docs.sencha.com/touch/2.4/apidocs/#!/api/Global_CSS