sencha touch 扩展篇之使用sass自定义主题样式 （下）通过css修改官方组件样式以及自定义图标
编译官方自带的主题包
在生成的项目以及官方sdk的目录下，自带了一些主题sass包，我们也可以通过修改sass文件来引入他们并进行编译，下图是官方sdk中自带的主题样式包：
我们如何在sass文件中导入这些样式呢，我们接着上一讲创建的项目，打开项目下resources/sass文件夹下的app.scss文件，去掉上一讲修改的样式，如图：
如果你要引入对应的样式，只需修改@import的路径就可以了，这里我们将其修改为黑莓的样式，我们对@import的路径进行下修改：
这里我们将default替换成了bb10，如果你要引入别的样式，替换成别的样式的文件夹名即可，接着我们用命令行工具对scss文件进行编译，进入到sass文件夹目录下，
执行compass watch app.scss（实时监听），也可以执行compass compile app.scss进行单次编译，上讲我们讲过
等css被overwrite覆盖了，我们来运行下项目，如图，我们的项目变成了黑莓的默认样式：
其他的附带样式大家可以自己去尝试，这里我们就不多做演示了，接着我们讲讲如何在sass中通过css来修改官方组件，
在sass中通过css修改官方组件
默认情况下，sencha touch的组件都有一个baseCls来匹配他们的组件名称，如下：
Ext.List -> .x-list Ext.field.Text -> .x-field-text Ext.field.Numer -> .x-field-number
如果你修改了一个组件的baseCls属性，你会发现他的所有样式都不存在了，一般情况下我们很少修改baseCls属性，如果是在原有组件基础上叠加，可以设置cls属性，相当于在组件原有dom结构上多加了个css属性，我们可以通过修改这个css属性来改变样式，
一般情况下，你可能并不是非常熟悉sencha touch组件的dom结构，这个时候，你就需要通过浏览器的dom查看工具来对组件进行查看，
在chrome浏览器中，你可以把鼠标移到组件上右键审查元素，或者f12打开开发者工具，进行元素查看，这里我们以项目中的titlebar组件的文本内容为例：
首先我们选中titlebar的文本内容，右键，选择审查元素，如果你是英文版的chrome，那么对应的是inspect Element,
点击审查元素后，会打开chrome的开发者工具，如图：
接下来，你可以在右边的样式栏对你选中的元素属性进行修改测试，我们将文本的颜色修改为红色，
这时我们可以看到项目中的标题文本变成了红色，但是这并不是真正的项目演示效果，我们还需要将样式拷贝到scss文件中进行编译，我们右键复制该样式到app.scss中，添加文本
颜色，如图：
等待命令行overwrite样式，成功后我们刷新项目，如图，文本颜色变成红色了
这样我们就修改样式成功了，不过在有些情况下，由于原有组件已经存在某些样式，直接这么写会无法修改样式，此时，你需要修改css的优先级来让你写的样式对
已有样式进行强制覆盖，比较常用的是！important（其他的方式大家可以去查看css优先级的相关资料）
如下，
.x-title .x-innerhtml {
color:red !important;
}
其他组件的修改方法以此类推，在sencha touch中，几乎所有的组件都是可以任意修改样式的，所以你可以随意构建出自己想要的任何界面，
接着我们介绍下大家遇到问题最多的自定义图标
使用sass自定义sencha touch 图标
从sencha touch 2.2版本开始，原有的图片图标都被替换成了字体图标，网上的大部分教程都是2.2之前版本的，所以很多人参照那些教程达不到想要的效果，这里我们就来讲讲sencha touch 2.2版本之后的自定义图标的方法，
首先，我们了解下为什么要将图片图标替换为字体图标呢，大家知道，不同的移动设备会有不同的屏幕尺寸，不同的屏幕密度，不同的分辨率，原生开发中我们可以为不同的分辨率指定不同的图片，但是在html5开发中，要实现起来却比较困难，一张图片如果分辨率低了，那么在大屏高分辨率手机上就会模糊失真，因为图片图标是属于位图的，而使用自体图标能很好地解决这个问题，因为字体图标是矢量图，不管放大多少倍也不会失真，并且通过css样式就能轻松地改变它的大小跟颜色，另一方面，字体图标相对图片图标来说占用的内存会少很多，而且加载速度也比图片要快。
了解了为什么使用字体图标后，我们来看看如何在新版本的st中自定义icon图标
在sencha touch中，默认集成了pictos字体图标，对照图如下，上面为图标，下面为对应的content文本：
这些图标都是pictos字体中已经自带的，不过，为了减少css文件的大小，sencha touch默认只引入了小部分icon样式，如user，locate等
但是在sass文件中其实已经为我们封装好了这些icon，我们打开项目文件下的touch/resources/themes/stylesheets/default/minxins/_Class.scss文件，可以看到已经定义好的引入或还未引入的icon样式：
这里return的即上面pictos图中图标所对应的文本content，name即可以通过@incloude icon（name）所对应的name，
下面我们演示下如何使用：
1.引入已有的图标
我们打开app.scss，这里我们引入一个图标list，
等待编译结束，我们修改Main.js中tabpanel的welcometab的图标home改为list
运行项目，我们可以看到项目的home图标变成list图标了
2.直接通过include定义指定的图标
@include("test","H");
这里的test是你定义的样式名，而“H”则是pictos对照图里字体图标对应的文本
，此时，我们便可以在iconCls中引用test来使用这个图标了
3.自定义字体：
当然，我们也可以定义自己的字体图标，给大家推荐个网站http://icomoon.io/，这个上面可以自己选择自己喜欢的字体图标，然后选择后进行导出成字体图标，导出的字体图标我们可以利用css3的@font自定义字体，
之后的使用中，你可以在app.scss文件直接定义字体图标的样式通过iconCls进行调用:
.icon-notice {
font-family: "icomoon" !important;
font-size: 23px !important;
content: "\e60a";
}
也可以通过官方api来引入自定义的字体图标：
@include icon('home', '\e60a', 'icomoon');
4.自定义图片图标
虽然不是很推荐，但在一些特殊情况下，比如你没有字体图标，或者图标太复杂等情况，你可以自定义图片图标，
很简单
直接定义css样式的图片背景，通过iconCls引入就行了
.icon-home {
background: url("../images/icon-home-press.png") no-repeat;
}
我们在需要使用这个图标的组件用iconCls:"icon-home"来引入就可以了，
有的时候可能存在图标大小不对的情况，也可以通过修改样式来调整：
.icon-home, .icon-user, .icon-info, .icon-setting {
width: 24px !important;
height: 24px !important;
}
由于css优先级的问题，这里的!important不能少，否则宽高改变会无效
转自：http://www.cnblogs.com/cjpx00008/p/3695961.html
