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