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 文件。