如何使用Compass/Saas在Extjs中自定义工具栏按钮？

Question

我想使用Compass/Sass在Extjs中自定义工具栏按钮主题，以消除渐变效果。

@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 
);

但它返回了罗盘编译错误：

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 

- Marcus Pipi

---

看起来scss的一部分正在尝试操作null值并添加像素，0可以替代null吗？ - dougajmcdonald

你确定你使用的SASS/Compass版本不过时吗？你使用的是最新版本的Ext JS 4吗？ - knalli

Answer 1

你必须放置

$icon-size:16px,

例如：

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

- catalinux

Answer 2

如果没有梯度，应该使用“none”；

例如：

@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
);

- LVEYO