ExtJs4 与 SASS 的亲密接触——使用 SASS 自定义主题

ExtJs4 与 SASS 的亲密接触——使用 SASS 自定义主题

　　SASS 是一个在 Ruby 社区兴起的样式语言，支持嵌套、变量、混入、继承等等语言特性，通过命令行工具或Web框架插件生成标准的 CSS 样式（参加SASS主页http://sass-lang.com/）。使用 SASS 定义的样式代码更少、更清晰，更重要的是减少重复代码，符合 DRY 原则。让人高兴的是，ExtJs4 已经转向 SASS，你可以在 ext-4.0.2a\resources\sass\ 找到所有 ExtJs 样式的 SASS 版本。
　　由于 SASS 支持变量，所以修改/覆盖样式变得更加容易。例如，只要把 ExtJs 预定义的一个名为 $base-color 的变量重新赋值为 #a1c148（绿色），所有 Ext 控件的底色就会全都变成绿色了。在 ext-4.0.2a\resources\themes\stylesheets\ext4\default\variables\ 文件夹里可以找到所有预定义的变量。

下面我们一步一步地演练一下使用 SASS 自定义样式的全过程。

准备工作

Step1 下载 ExtJs4. http://www.sencha.com/products/extjs/download
Step2 下载 Ruby。在 http://www.ruby-lang.org/en/downloads/ 页，如果你是 Windows 用户应该下载“Ruby on Windows” 节下的“Ruby 1.9.2-p180 RubyInstaller”。下载后将 Ruby 安装到 D:\Ruby192\。为方便使用Ruby命令行工具，安装时建议勾选“Add Ruby executables to your PATH”选项。
Step3 安装 Compass/SASS。打开 Windows 命令行，执行
gem install compass
安装后，可使用命令
compass -v
sass -v
检验是否已成功安装了 compass 和 sass。

创建网站，规划目录

Step4 创建一个 MVC 网站，添加一个名为 MyThemDemoController 的控制器，以及配套的 Views\MyThemDemo\MyThemDemo.aspx 和 Scripts\Demo\MyThemDemo.js。把 Step1 中下载的 ext-4.0.2a 复制到网站的 Scripts 目录下。在 IIS 中创建网站，我把端口设成了 6000，你如果想偷懒的话可以下载我建好的整个 Demo 项目，但是要注意 1）别忘了在IIS中建网站，端口是 6000，2）ext-4.0.2a 一共 128M，我为了节省上传、下载时间没有放进去，3）Demo 页 URL 是 http://localhost:6000/MyThemDemo/MyThemDemo.

Step5 把 Scripts\ext-4.0.2a\resources\themes\templates\resources 文件夹复制到 Scripts 文件夹下。把 Scripts\ext-4.0.2a\resources\themes\images\default 文件夹复制到 Scripts\resources 文件夹下，并把它由 “default”重命名为“images”。之后你的目录结构应该如下图所示。

由 SASS 生成 CSS

Step6 修改 Scripts\resources\sass\config.rb 中的 $ext_path 变量，使其指向 ExtJs 根目录。
$ext_path = ".. /.. /ext-4.0.2a"
注意".."和"/"之间不要有空格，天杀的博客园居然会把 “.. /.. /”替换为“http://www.cnblogs.com”，逼得我没办法只好加了个空格进去 囧

Step7 修改 Scripts\ext-4.0.2a\resources\themes\lib\utils.rb 第 62 行，由
images_path = File.join($ext_path, 'resources', 'themes', 'images', theme) 
修改为
images_path = relative_path
这样 ExtJs 将使用 Scripts\resources\images 下的图片而不是 Scripts\ext-4.0.2a\resources 下的图片。

Step8 打开 Windows 命令行，进入 Scripts\resources\sass 目录下，执行命令
> compass compile
此命令会在 Scripts\resources\css 文件夹下生成 my-ext-theme.css 文件。

修改 $base-color 变量，查看效果

Step9 编辑 Scripts\resources\sass\my-ext-theme.scss，在 “@import 'ext4/default/all';” 这一行之前插入一行
 $base-color: #a1c148;
注意 对变量的重新赋值的语句都应该放在 “@import 'ext4/default/all';” 这一行之前。

Step10 再次打开 Windows 命令行，进入 Scripts\resources\sass 目录下，执行命令
> compass compile
重新生成CSS文件。

Step11 编辑 MyThemDemo.aspx，添加对 my-ext-theme.css 等文件的引用。

Step12 编辑 MyThemDemo.js，把 Scripts\ext-4.0.2a\examples\themes\themes.js 里的内容全部复制到 MyThemDemo.js 里面。
Step13 打开浏览器，进入 http://localhost:6000/MyThemDemo/MyThemDemo 即可看到效果了。

但是如何能够实时更改样式呢？（以便达到这个视频所演示的效果），偶也不知道。你要是知道的话请告诉我！
本文主要内容来自http://www.sencha.com/learn/theming/。