上一講我們講解了如何使用官方的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不能少，否則寬高改變會無效