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


		1. Ruby 安装   
 
假设安装在 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位置。

补充：web前端 , JavaScript ,