Question

我是Sankar。我试图使用SASS为特定的Extjs按钮提供颜色。但我无法找到解决方案。请帮我解决这个问题。我给出了以下代码。

$base-color: #5291C5;

@import 'compass';
@import 'ext4/default/all';

@include extjs-button-ui(
    'smallbtn',  
    $border-radius: 10px,
    $border-color: #A52A2A,
    $background-color: #A52A2A,
    $color: #A52A2A

    enter code here
);

额外信息

感谢您的回复。我给了@include @import'rem4 / default / all';在底部。然后它显示一些语法错误。我无法得到这个解决方案。我的要求，因为我创建了一个“tbar”这样的事情 { 文字：'检索'， id：'btnConsolidatedRetrieve'，用户界面：“绿色” } 我给出的.scss文件是

$include-default: false;


$base-color: #5291C5;

@import 'compass';
@import 'ext4/default/all';

@include extjs-boundlist;
@include extjs-button;
@include extjs-btn-group;
@include extjs-datepicker;
@include extjs-colorpicker;
@include extjs-menu;
@include extjs-grid;
@include extjs-form;
@include extjs-form-field;
@include extjs-form-fieldset;
@include extjs-form-file;
@include extjs-form-checkboxfield;
@include extjs-form-checkboxgroup;
@include extjs-form-triggerfield;
@include extjs-form-htmleditor;
@include extjs-panel;
@include extjs-qtip;
@include extjs-slider;
@include extjs-progress;
@include extjs-toolbar;
@include extjs-window;
@include extjs-messagebox;
@include extjs-tabbar;
@include extjs-tab;
@include extjs-tree;
@include extjs-drawcomponent;
@include extjs-viewport;


@include extjs-button-ui(
'green',  

$border-color: #CC00FF
);

$relative-image-path-for-uis: true;

在给出这个之后“tbar”没有改变。请给我一个简单的例子。我无法找到这个ui的工具栏按钮。

Answer 1

除非您确保@import 'ext4/default/all';行位于最底部，否则此代码将无效。之后声明的任何内容都不会对从_all.scss导入的变量生效，因为_all.scss中的mixins需要在编译之前访问这些值。如果不需要处理小部件等，你可以在导入所有行之后声明自己的代码。

此外，当您执行compass compile时，请检查终端中的错误消息，因为这通常会捕获语法错误或错误的图像网址。

以下两篇文章应该为您提供更多帮助。当我学习如何为ExtJS制作SASS UI时，它们对我来说非常宝贵：

http://existdissolve.com/2011/09/extjs-4-theming-getting-this-thing-to-go/

http://existdissolve.com/2011/09/extjs-4-theming-custom-uis/

使用SASS问题Extjs 4按钮颜色？

1 个答案: