ExtJS自定义主题（theme）样式详解

本文基于Ext JS 4.2.1版本
UI组件基础
学习ExtJS就是学习组件的使用。ExtJS4对框架进行了重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext的控件。
ExtJs4的组件体系中有将近100种组件，而这些组件又可以大致分为四大类，即容器类组件、工具栏及菜单栏组件、表单及元素组件、其他组件。
theme主题
ExtJs4引入了全新的主题系统，采用Sass和Compass技术，提供了标准的主题模板，通过对主题模板的简单定制就可以创造出丰富多彩的各种主题。

Sass和Compass概述
Sass
Sass样式表语言是CSS的一个扩展，为CSS提供了变量、内嵌规则、混入（mixins）、选择器继承等特性，在最新的Sass3中100%兼容CSS3，语法文件也升级为SCSS（Sassy CSS），每一个有效的CSS3文件也是有效的SCSS文件，这种兼容性降低了学习成本，开发人员可以平稳的由CSS过渡到Sass的开发。
Sass样式表语言为CSS级联样式表提供了编程的能力，现在我们可以在Sass中定义变量在不同的样式中引用甚至进行计算，定义混入（mixins）在不同的地方进行复用，这些能力都是CSS所不具有的，经过编译之后Sass会输出标准的CSS文件在不同的浏览器中使用。

Sass特性：
混入(Mixins)——class中的class；
参数混入——可以传递参数的class，就像函数一样；
嵌套规则——Class中嵌套class，从而减少重复的代码；
运算——CSS中用上数学；
颜色功能——可以编辑颜色；
名字空间(namespace)——分组样式，从而可以被调用；
作用域——局部修改样式；
JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
Sass的详细介绍和说明可见：http://sass-lang.com/
Compass
Compass是一个基于Ruby的、开源的、用于CSS创作的框架。它使用Sass样式表语言，可以非常容易和高效地构造样式表，同时，Compass内置了大量Web开发中可重用的优秀模式，以便开发者使用。下面用一个简单的等式来展示Compass所发挥的作用：
Compass = Sass样式表语言 + 大量可重用的优秀CSS模式
Compass的详细介绍和说明可见：http://compass-style.org/
准备工作(安装运行环境)
安装Ruby
使用SASS和Compass需要用到Ruby，可以到http://rubyinstaller.org/下载Ruby的安装包，下载后的文件是“rubyinstaller-1.9.3-p429.exe”。
（注意，不要下载最新版Ruby2.0.0-p195，不然后面开发中会由于版本问题出错。Ruby 1.9.3-p429就可以。）
双击运行，步骤如下：
注意将安装目录上的3个选项都选上。
点击完成。
至此，Ruby就安装完成了。
在开始菜单Ruby程序组下，单击“Start Command Prompt with Ruby”。

进入Ruby的命令行界面。输入
ruby –v
回车后界面提示如下：

说明Ruby运行环境安装成功。
安装Compass和Sass
要使用Compass，首先要在Ruby中安装框架。
在开始菜单Ruby程序组下，单击“Start Command Prompt with Ruby”，显示命令提示窗口。在命令行输入以下命令开始安装Compass：
gem install compass
（该命令可以自动远程安装Compass相关文档到本地文件夹中，由于采用远程安装的方式，因此安装时间较长，请耐心等待。）
当看到如下图所示窗口中的信息时，表示Compass已经安装成功。

从图中可以看出，已经安装了sass-3.2.9版和compass-0.12.2 版。
在命令行中执行：compass –v 和 sass –v可以分别查看当前系统中已安装的版本信息。
到这里，已经完成了Sass和Compass的安装。
Compass项目（Sass编译成Css）
1.项目初始化
接下来，要创建一个你的Compass项目，假定它的名字叫做myproject，那么在命令行键入：　　
compass create myproject
当前目录中就会生成一个myproject子目录。
进入该目录：
cd myproject
你会看到，里面有一个config.rb文件，这是你的项目的配置文件。还有两个子目录sass和stylesheets，前者存放Sass源文件，后者存放编译后的css文件。

接下来，就可以动手写代码了。
2.编译
在写代码之前，我们还要知道如何编译。因为我们写出来的是后缀名为scss的文件，只有编译成css文件，才能用在项目上。
Compass的编译命令是
compass compile
该命令在项目根目录下运行，会将sass子目录中的scss文件，编译成css文件，保存在stylesheets子目录中。
默认状态下，编译出来的css文件带有大量的注释。但是，生产环境需要压缩后的css文件，这时要使用--output-style参数。
compass compile --output-style compressed
Compass只编译发生变动的文件，如果你要重新编译未变动的文件，需要使用--force参数。
compass compile --force
除了使用命令行参数，还可以在配置文件config.rb中指定编译模式。
output_style = :expanded
:ex