【翻譯】如何在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.