Ext JS 4 使用SASS 和 Compass 自定义主题 (compass and sass used in ext 4 theme)

1. Ruby 安装  下载Ruby 并且安装 地址：http://rubyinstaller.org/

假设安装在 C:\Ruby193

在bin目录 执行命令 gem install compass 安装 compass

安装完成后，可输入一下代码查看安装的版本

compass -v

sass -v

可把C:\Ruby193\bin 目录添加到Path环境变量，那样在任何目录都可以执行命令compass，sass。

2. 自定义theme目录结构如下

mytheme/
mytheme/extjs/
mytheme/app.js
mytheme/index.html
mytheme/resources/
mytheme/resources/css/
mytheme/resources/sass/
mytheme/resources/sass/config.rb
mytheme/resources/sass/my-ext-theme.sass

extjs目录 extjs\resources\themes\templates\resources\sass下config.rb，my-ext-theme.sass有例子文件拷贝到对应目录即可。

在目录mytheme/resources/sass/执行 compass compile，在目录mytheme\resources\css生成css文件my-ext-theme.css

3.改变SASS全局变量如$base-color: #aa0000;

所有变量定义在/extjs/resources/themes/stylesheets/ext4/default/variables

4.运行命令时有可能会出错 ”Line 8: File to import not found or unreadable: ext4/default/all“ 因为config.rb，my-ext-theme.sass文件放置目录位置有关最好按上面目录放置自定义theme目录结构。

也可修改resources/sass/config.rb文件内$ext_path = "../../extjs"对应extjs sdk位置。