How to customize toolbar in Extjs using Compass / Saas?

Question

I want to customize the toolbar button theme in Extjs using Compass / Sass to eliminate the gradient effect.

@include extjs-button-ui( 'my_button', $background-gradient:null, $background-gradient-over:null, $background-gradient-focus:null, $background-gradient-pressed:null, $background-gradient-disabled: null ); 

But it returns a compass compilation error:

 WARNING: @theme-background-image: Theme image not found: ../images/btn/btn-topbar_button-corners.gif on line 18 of /Users/user/Documents/workspace/sihalon/war/extjs/resources/themes/stylesheets/ext4/default/mixins/_theme-background-image.scss WARNING: @theme-background-image: Theme image not found: ../images/btn/btn-topbar_button-sides.gif on line 18 of /Users/user/Documents/workspace/sihalon/war/extjs/resources/themes/stylesheets/ext4/default/mixins/_theme-background-image.scss error my-ext-theme.scss (Line 693 of _button.scss: Invalid null operation: "null plus 4px".) overwrite ../css/my-ext-theme.css 

Answer 1

You have to put

 $icon-size:16px, 

For instance:

 @include extjs-button-ui( 'yellow', $background-color:yellow, $icon-size:16px, $font-size:18px ); 

Answer 2

Shuold doesn’t use a single gradient,

For instance:

 @include extjs-button-ui( 'my_button', $background-gradient:none, $background-gradient-over:none, $background-gradient-focus:none, $background-gradient-pressed:none, $background-gradient-disabled: none );