sencha touch2 自定义样式(theme)

在上一篇中提过，sencha touch使用的是sass来写css，用compass打包压缩。

用户自己编写的样式文件，默认的入口是resources/sass/app.sass。

关于sass文件的组织，如果是比较简单的项目，一个app.scss就足够了，如果是比较大的项目，可以把app.scss当做入口文件，里面引入其他的scss模块即可。

默认的主题是default theme，路径是：sdk/resources/themes/stylesheets/sencha-touch/default

看一下它的文件结构：

.
├── _all.scss
├── _core.scss
├── _global.scss
├── _mixins.scss
├── _variables.scss
├── _widgets.scss
├── core
│   ├── _core.scss
│   ├── _layout.scss
│   └── _reset.scss
└── widgets
    ├── _buttons.scss
    ├── _carousel.scss
    ├── _form-sliders-basic.scss
    ├── _form-sliders.scss
    ├── _form.scss
    ├── _img.scss
    ├── _indexbar.scss
    ├── _list.scss
    ├── _loading-spinner.scss
    ├── _map.scss
    ├── _media.scss
    ├── _msgbox.scss
    ├── _panel.scss
    ├── _picker.scss
    ├── _sheets.scss
    ├── _tabs.scss
    ├── _toolbar-forms.scss
    └── _toolbar.scss

其中 最重要的一个文件是_variables.scss，定义了很多全局变量，控制了颜色、行号、字号、渐变等基本样式，下面的很多组件都是直接使用这个变量或者在这些变量上进行运算得到自己的样式。

比如比较重要的几个变量：

$base-color：全局颜色，默认是#1985D0，一种深蓝色。

$base-gradient：渐变，默认是突出效果的，还有matte - bevel - glossy - recessed - flat 可选。

$active-color: 被激活组件的颜色，比如被选中的列表项

通过自定义globalcss可以很直接地改变大部分组件的样式。

如果想改变某个特定组件的样式，可以先去看该组件对应的sass文件，比如我想修改list列表的颜色。

先找到widgets/_list.scss文件，打开发现文件开头就定义了一堆变量：

$list-color： #000 !default; 默认文字颜色是黑色

$list-bg-color: #f7f7f7 !default;默认背景是浅灰色

$list-pressed-color: lighten($active-color, 50%) !default; 列表项被按下的颜色

$list-active-color: $active-color !default; 列表项被选中的颜色

自定义这些变量可以很简单的自定义列表样式。

知道如何通过自定义变量来实现自定义主题，下面就是如何组织app.sass文件，对于单个sass文件一般是如下的格式，拆分成多个文件的也是类似的：

//1 ，自定义变量，实现基本的样式定制，因为要覆盖默认样式（就是 !default的样式），所以要写在最前面。

$base-color: #ff0000;

$list-bg-color: #F4F4F4;

//.......

//2，导入需要用到的模块，尽量只选择自己用到的，以免css文件过大

@include sencha-panel;

@include sencha-buttons;

//......

//3，对于通过自定义变量无法实现的样式需求，在这里直接重写样式

@mixin sencha-list {

//....

}

//4，下面是自己的样式，当然最好是拆分成多个模块，在这里分别import

.app {

    .loading {

    //....

    }

}

上面只是粗略的划分了四部分，其中对于第四部分自己的样式，可以更细分（比如变量，mixin，组件，页面等）

对于拆分成多个sass文件的，基本原理也是一样的。