Sencha Touch 2.3 自定义主题皮肤,颜色

写博客园越来越懒了，只写重点部分，不明白的可以Q我。

1.当你通过Cmd生成项目之后，App\resources\sass就是我们的样式源文件

2.想自定义自己的样式分为两种方式

　　扩展：这个是基于st提供的皮肤上面做修改

　　新建：基于st的base主题，做自己的主题

　两者基本一样，以扩展为例

3.打开App\resources\sass\app.scss

// 这里是需要继承的css样式，默认是default，当然如果你要扩展其他样式可以自己选择，例如：cupertino，bb10，mountainview等等
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

//这里是新增主题用的
//@import 'sencha-touch/base';
//@import 'sencha-touch/base/all';



// Custom code goes here..
//这里写自己的css，例如：

.dataview-basic {
    width: 100%;
    padding: 15px 0 15px 8px;
    border-bottom: 1px solid #dedede;
    background-color: #fefefe;
}

.dataview-selected {
    background-color: #f7f7f7;
}

// Examples of using the icon mixin:
//这里是一些图标的配置，新增等
// @include icon('user');

4.在app.scss中可以加入自己的css，提高加载的效率，而不必在app.json中配置（app.json中的配置会导致app.css和custom.css加载顺序的问题，很可能或导致程序第一次加载的时候，自定义的样式不起作用）

 

5.改变主颜色，例如（button，toobar）

主颜色的配置，请到：workspace\touch\resources\themes\stylesheets\sencha-touch\default\var

var文件夹，顾名思义都是参数，我们只需要变更这里面的参数，即可解决问题。

你可以选择单改某个模块，也可以修改全局的颜色，全局的颜色配置在_Class.scss

 

6.打开_Class.scss，我想你已经一目了然了。主颜色：$base-color: #4c4c4c !default;

7.里面的说明很多了，将basecolor该成自己喜欢的。

8.编译我们的css，系统cmd到生成的app目录里面（workspace/myapp/），执行命令

compass compile resources/sass

9.大功告成，尽情品味吧