sencha touch 扩展篇之使用sass自定义主题样式 （下）通过css修改官方组件样式以及自定义图标

 　上一讲我们讲解了如何使用官方的api来修改主题样式，这讲我们继续讲解sass的样式修改，

　 编译官方自带的主题包

　  在生成的项目以及官方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不能少，否则宽高改变会无效