ExtJs4 与 SASS 的亲密接触——使用 SASS 自定义主题

逃离我推掉我的手 2022-08-27 01:24 150阅读 0赞

# [ExtJs4 与 SASS 的亲密接触——使用 SASS 自定义主题][ExtJs4 _ SASS _ SASS] #

SASS 是一个在 Ruby 社区兴起的样式语言，支持嵌套、变量、混入、继承等等语言特性，通过命令行工具或Web框架插件生成标准的 CSS 样式（参加SASS主页[http://sass-lang.com/][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\\ 文件夹里可以找到所有预定义的变量。

![2011073021343525.png][]

下面我们一步一步地演练一下使用 SASS 自定义样式的全过程。  
  
准备工作  
  
Step1 下载 ExtJs4. [http://www.sencha.com/products/extjs/download][http_www.sencha.com_products_extjs_download]  
Step2 下载 Ruby。在 [http://www.ruby-lang.org/en/downloads/][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 项目][Demo]，但是要注意 1）别忘了在IIS中建网站，端口是 6000，2）ext-4.0.2a 一共 128M，我为了节省上传、下载时间没有放进去，3）Demo 页 URL 是 [http://localhost:6000/MyThemDemo/MyThemDemo][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”。之后你的目录结构应该如下图所示。

![2011073110511462.png][]

由 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][import] 'ext4/default/all';” 这一行之前插入一行  
 $base-color: \#a1c148;  
注意 对变量的重新赋值的语句都应该放在 [“@import][import] 'ext4/default/all';” 这一行之前。  
  
Step10 再次打开 Windows 命令行，进入 Scripts\\resources\\sass 目录下，执行命令  
> compass compile  
重新生成CSS文件。  
  
Step11 编辑 MyThemDemo.aspx，添加对 my-ext-theme.css 等文件的引用。

![2011073111443597.png][]

Step12 编辑 MyThemDemo.js，把 Scripts\\ext-4.0.2a\\examples\\themes\\themes.js 里的内容全部复制到 MyThemDemo.js 里面。  
Step13 打开浏览器，进入 [http://localhost:6000/MyThemDemo/MyThemDemo][http_localhost_6000_MyThemDemo_MyThemDemo] 即可看到效果了。

但是如何能够实时更改样式呢？（以便达到[这个视频][Link 1]所演示的效果），偶也不知道。你要是知道的话请告诉我！  
本文主要内容来自[http://www.sencha.com/learn/theming/][http_www.sencha.com_learn_theming]。

[ExtJs4 _ SASS _ SASS]: http://www.cnblogs.com/1-2-3/archive/2011/07/31/ExtJs4-SASS-Custom-Theme.html
[http_sass-lang.com]: http://sass-lang.com/
[2011073021343525.png]: /images/20220824/07d83113913d40cb9185e5294f216a8f.png
[http_www.sencha.com_products_extjs_download]: http://www.sencha.com/products/extjs/download
[http_www.ruby-lang.org_en_downloads]: http://www.ruby-lang.org/en/downloads/
[Ruby 1.9.2-p180 RubyInstaller]: http://rubyforge.org/frs/download.php/74298/rubyinstaller-1.9.2-p180.exe
[Demo]: http://files.cnblogs.com/1-2-3/ExtJsThemeDemo.rar
[http_localhost_6000_MyThemDemo_MyThemDemo]: http://localhost:6000/MyThemDemo/MyThemDemo
[2011073110511462.png]: /images/20220824/6b1f5956805d41178aa91078873a3140.png
[import]: mailto:%E2%80%9C@import
[2011073111443597.png]: /images/20220824/afcf6c326dac4923acb307df5d53d83c.png
[Link 1]: http://www.screencast.com/users/sroussey/folders/Jing/media/abbaafdc-82d6-4431-81b0-832d6729266c
[http_www.sencha.com_learn_theming]: http://www.sencha.com/learn/theming/