Question

我想要一个背景色为渐变的自定义工具栏。我试着用sass。但它仍然没有用。我做了什么，我正在逐步写作：

我在当前项目的资源文件夹中创建。
我保留了主题和图片文件夹。
我在资源文件夹中创建了css和sass文件夹。

在sass文件夹中我创建了app.scss文件，其中包含以下代码：

    $base-color: #588aad; // go big blue!$include_default_icons: false;
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;


@include pictos-iconmask("bookmarks");
@include pictos-iconmask("compose");
@include pictos-iconmask("trash");
@include pictos-iconmask("search");
@include pictos-iconmask("bookmark2");


@include sencha-toolbar-ui('charcoal', #333333,'glossy');

然后我使用以下代码创建了config.rb文件：

dir = File.dirname（文件）加载File.join（dir，'..'，'themes'） sass_path = dir css_path = File.join（dir，“..”，“css”）环境=：生产 output_style =：压缩
1. 然后我在命令提示符
2. 在css文件夹中，运行命令后创建了app.css文件。 7.然后我更改工具栏的代码：

Answer 1

在您的网络浏览器检查器中检查css是否以x-toolbar为目标。清空浏览器缓存可能有所帮助。您的config.rb也可能配置错误 - this is a good resource on config.rb setup for compass

Answer 2

根据您使用的ST版本，您可能希望使用Sencha Cmd。使它变得更容易。

在Sencha Cmd中，您可以通过构建空应用程序来创建起点。完成后，您可以从app根文件夹运行sencha app watch命令，任何sass更改都将自动编译以及许多其他进程。

MyApp/resources/sass/app.scss --> compiles to --> MyApp/resources/css/app.css

// THIS WILL OVERRIDE THE DEFAULT SENCHA TOOLBAR UI THEMES
@include sencha-toolbar-ui('normal',         $base-color,   'glossy'); 
@include sencha-toolbar-ui('dark',           $second-color, 'matte' );

// THIS ONE USES A CUSTOM UI. THERES COMPASS MIXINS IN THE INCLUDED
// TO MAKE A GRADIENT OUT OF THIS COLOR.
@include sencha-toolbar-ui('custom-ui-name', $third-color,  'glossy');

这对我有用。如果您想控制渐变，那么您可以查看文档http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.Toolbar-css_mixin-sencha-toolbar-ui

中的内容

希望这有帮助！

如何在sencha touch中创建自定义工具栏？

2 个答案: