ExtJs4 与 SASS 的亲密接触——使用 SASS 自定义主题
下面我们一步一步地演练一下使用 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?
由 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/。
