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

修改 $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/

posted on 2011-07-31 11:48  1-2-3  阅读(11487)  评论(14编辑  收藏