写博客园越来越懒了,只写重点部分,不明白的可以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.大功告成,尽情品味吧