【翻譯】如何在Ext JS 6中使用Fashion美化應用程序

---

原文：How to Style Apps with Fashion in Ext JS 6

---

在Ext JS 6，一個最大的改變就是框架合併，使用一個單一的代碼庫，就能夠爲每一種設備開發各具備良好體驗的最好應用程序。它還帶來了一種美化應用程序的新方式。

在本文，重點是Sencha Fashion。這是什麼？該如何使用它呢？在將來陸續的教程中，將爲你展現如何去建立一個極好的暗黑主題。

編譯主題

Ext JS應用程序的主題使用的是SASS，它是一種動態編寫CSS代碼的方法。例如，能夠在樣式表中使用變量和運算。瀏覽器並不瞭解SASS，它只知道 CSS，隱藏，這些SASS主題須要被編譯爲瀏覽器能理解的，生產用的CSS代碼。在Ext JS應用程序中能夠經過在Sencha Cmd運行如下命令來編譯主題：

sencha app build [development]

或

sencha app watch [toolkit]

二者的區別在於watch會經過輪詢來了解更新，並理解進行編譯，而build編譯只能手動執行一次。

在舊版本的Ext JS或Sencha Touch，SASS樣式是在Ruby中編譯的。在Windows，須要使用管理員權限來安裝Ruby。一旦安裝完成，就能夠開始編譯主題了。不過，在有大量代碼庫和高級主題的時候，就要花費大量的編譯時間。

爲了編譯高級主題，有時候須要花費一分鐘。而後，你不得不刷新瀏覽器窗口來測試主題以確保已正確設置SASS變量。以後還要一次次的重複此過程。要知道，這個過程是至關耗時間的。這也是爲何對Fashion感到高興的緣由。

Sencha Fashion是使用javascript來編譯主題的，能夠說這是超級的快。當在左邊的顯示器修改一行代碼後，就能夠右邊的顯示器看到變化了，就是這麼快。再也不須要等等編譯（在服務器開始），也再也不須要刷新瀏覽器窗口。

因爲Fashion使用的是javascript，於是有更多優勢。例如，能夠在Fashion之上進行擴展並建立本身的樣式功能（相似SASS功能），還能調試樣式表代碼。

不過，最大的得益仍是能夠在開發機器上設計主題。要實現這個，只須要在命令行運行sencha app watch並在URL中添加如下參數：

?platformTags=fashion:true

開始編譯

下面來嘗試下使用Fashion來編譯一個主題。首先，下載Ext JS 6。這已經包含了SDK。還須要下載Sencha Cmd 6。

安裝好命令行工具後，在機器上解壓Ext JS 6框架包（zip）。打開命令行提示符並經過命令行導航到框架文件夾。在Ext6文件夾，輸入如下命令來建立第一個sencha通用應用程序：

ext> sencha generate app MyApp ../指定的項目路徑

在IDE或編輯器中打開新的應用程序項目。要注意classic和modern這兩個新的文件夾。這是用來區分工具包的文件夾。共享代碼要放在 app文件夾內。classic工具包文件夾包含了舊版本（桌面）視圖，而modern工具包文件夾則包含了現代touch的視圖。對於兩個工具包來 說，DOM是不一樣的，於是樣式也會有些許不一樣。這也是爲何工具包文件夾會有一個src子文件夾用來放置javascript代碼，會有一個sass文件 夾來放置指定的樣式的緣由。

打開app.json文件並滾動到「builds」配置：

    "builds": {        "classic": {            "toolkit": "classic",            "theme": "theme-triton"
        },        "modern": {            "toolkit": "modern",            "theme": "theme-neptune"
        }
    },1234567891011

要注意這裏的每個build配置，他們都有本身的工具包和主題。對於classic配置，將使用新的海衛一（Triton）主題，而modern工具包將使用海王星（Neptune）主題（原名是Sencha Touch默認主題）。

如今不須要對這個進行修改。下面來建立兩個新文件：

classic/sass/var/Application.scss
modern/sass/var/Application.scss

如今，打開Sencha本地Web服務器，並讓Sencha輪詢樣式表的改變。

在通用應用程序的文件夾中，運行如下命令：

項目文件夾> sencha app watch classic

若是Cmd安裝正確，該命令會正確運行。如今內置的sencha服務器將等待更新。應用程序默承認經過http://localhost:1841來訪問。

假如運行的端口是1841，則在瀏覽器輸入如下地址來打開應用程序：

http://localhost:1841/?platformTags=fashion:true

等待應用程序加載完成。主題第一次編譯，須要一點時間。一旦看到應用程序，在編輯器打開如下文件：

classic/sass/var/Application.scss

若是有兩個顯示器，將瀏覽器窗口拖到其餘顯示器，讓編輯器在一個顯示器，而瀏覽器在另外一個顯示器。

接下來將樣式表的整體樣式修改成黑色。編寫如下全局變量：

$base-color: #000;

等一會，就能夠在瀏覽器中看到更改後的樣式了。不只標題已更改成黑色，其餘擴展自全局基本顏色的樣式都已經變成黑色了。，例如，雙擊網格，會看到告警窗口也已經改變了。

修改$base-color的值，試一下其餘顏色效果。例如20%變亮的紅色：

$base-color: lighten(red, 20%);

固然，如今也可使用這種方式來修改modern工具包的主題。運行如下命令：

sencha app watch modern

在瀏覽器打開如下url將打開modern工具包：

http://localhost:1841/?toolkit=modern&platformTags=fashion:true

修改如下文件：

modern/sass/var/Application.scss

這至關快！這就是Fashion，編譯是在Javascript下運行的。全部的效果都是在這個引擎下產生的。Sencha Cmd在後臺運行的是PhantomJS。它是一個沒有顯示的瀏覽器，能夠在命令行中運行。它能夠運行應用程序，編譯主題，以及將它推送給一個大的 javascript函數。每一次修改，都會讓javascript去修改DOM中的樣式。

敬請期待將來的主題教程。請把大家對於Fashion的想法告訴咱們。這個能夠在Ext JS 6論壇中提交你的問題。

---

做者： Lee Boonstra
Lee is a sales engineer at Sencha in Europe. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She also wrote a book for O’Reilly: Hands-on Sencha Touch 2.