Customizing Sencha Touch Sass Basic

app.scss

// Define variable in sass

// Base Color
$base-color: #af2584;

// Base Gradient Style
$base-gradient: 'glossy'; //matte, bevel,glossy,recessed

// Custome Panel Color
$page-bg-color: #EFEFEF;
$form-bg-color: #EFEFEF;
$form-field-color:$base-color;
$tabs-dark: #333;
$list-bg-color: #FFF;
$form-dark: #FFF; //dark

// Define custom Font Size 
$app-base-font-base:15px;
$app-base-font-smallest:13px;

// Importing Default Sass
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-toolbar-forms;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-loading-spinner;

// Use image under pitos/
@include pictos-iconmask('arrow_down');
@include pictos-iconmask('arrow_up');
@include pictos-iconmask('arrow_right');
@include pictos-iconmask('arrow_left');

// Use Custom Icon Image sass/images/icon by default
@mixin custom-iconmask($name) {
  .x-tab img.#{$name}, .x-button img.x-icon-mask.#{$name} {
    -webkit-mask-image: inline-image('icon/' + $name + '.png');
  }
}

@include custom-iconmask('Closed');

// Adding ui theme
@include sencha-toolbar-ui('gray-light',rgb(200, 200, 200),'matte');
@include sencha-toolbar-ui('white',#DDD,'bevel');
@include sencha-toolbar-ui('tbar-main-ui', rgb(1, 58, 157),  'matte');
@include sencha-toolbar-ui('light-gray', rgb(234, 234, 234),  'matte');
@include sencha-toolbar-ui('dark-blue',rgb(1, 58, 157),'matte');
@include sencha-toolbar-ui('tbar-white',rgb(255, 255, 255),'matte');