touch2.4.1(cmd6.1.7601) 修改theme-自定义（下）（2015.11.05）

使用sass来自定义主题样式

大部分情况下，官方提供的这些样式并不能满足我们对界面的需求，那么我们怎么来自定义这些主题样式呢，sencha touch官方早已经考虑到了这点，所以，整个框架的样式引入了sass进行了封装，这就是为什么在sdk和sencha cmd生成的项目中为什么能看到很多的scss文件了。

　　很多人要问了，什么是sass呢？

　　Sass是一门非常优秀的CSS预处语言，他是由Hampton Catlin创立的。它可以减化CSS的工作流，使开发者更加容易开发，维护CSS样式。SASS是Ruby语言写的，不过你并不需要懂ruby就能使用它，它使用了一些面向对象的方法来编写css，引入了“变量”、“混合参数”、“嵌套”和“选择器继承”等功能。

　　在st中，很多时候我们并不需要去通过sass语法去写css，所以这里仅做了解就可以，这里我给大家找了两篇关于sass的教程，大家可以去看一下，比较简单：

　　http://www.w3cplus.com/css/the-absolute-beginners-guide-to-sass.html

　　http://www.ruanyifeng.com/blog/2012/06/sass.html

1.首先，你的电脑得安装了ruby，在 sencha touch 入门系列 （二）sencha touch 开发准备 这讲中，我们已经配置了ruby的环境，

那么，接下来，我们就要配置sass了，

首先，打开命令行工具，如果是mac环境，键入　

 sudo gem install sass
 sudo gem install compass

　　如果是windows环境，键入：　　

gem install sass -v 3.2.12
gem install compass --version 0.12.2

注意：最好下载这两个版本

因为很多人包括我自己，通过命令

 “gem install compass” 安装的compass，在使用 “compass compile” 编译scss的时候会报下面的异常： 

"File to import not found or unreadable: blueprint/typography"

那么下面就要先卸载sass和conpass，然后重新安装上面两个版本的sass和conpass。

卸载sass

1.首先卸载compass

gem uninstall compass

2.卸载sass

gem uninstall sass 

在此时会报错如下图：uninstallation aborted due to dependent gem(卸载中止由于存在依赖关系，其实就是compass及compass-core及compass-import-once),

以为在上一步已经卸载了compass，所以未报compass  depends on sass的错

那我们就需要也先把依赖于sass的都卸载，卸载compass-core和compass-import-once。

gem uninstall compass-core

gem uninstall compass-import-once

卸载成功依赖于sass的文件后，执行卸载命令，出现Successfully ......表示卸载sass成功。

gem uninstall sass 

然后再依照之前的命令安装sass -v 3.2.12版本和compass --version 0.12.2版本。

等待安装完毕，通过compass -v 验证一下compass是否安装完毕，安装正确会显示如下

　　

2.对于sencha cmd创建的项目（如果不知道如何使用cmd创建项目的同学可以参考我的st入门系列第二讲），我们打开项目resources/sass/app.scss文件：

　　

　　这个就是我们用来自定义主题和样式的地方了，大家在查阅官方文档的时候有没有注意到导航栏上有两个特别的api，CSS Vars跟CSS Mixins，

　　

　　很多人一直不明白这个是用来干什么的，这个其实就是官方为我们封装好的sass的参数，cssvars是封装好的一些样式变量，你可以直接通过修改它的值来更改默认的样式，

　　而cssmixins是用来添加一些自定义的样式的，如字体，按钮背景等，下面我们来演示下：

　　打开app.scss文件,如图：

　　

　　这里，我们演示下如何修改我们的主题色，默认的是蓝色，我们改成黑色：

　　

  　　$base-color 是css vars中的变量，用来定义主题色的，注意，cssvars的参数必须写在@import上面，否则编译时会报错，这个时候，我们的样式还没有起作用，我们必须使用compass来对sass文件进行编译，生成对应的css文件，

　　　我们用命令行工具cd到我们的sass文件目录下，即项目文件夹下的resources/sass下，

　　　我们运行编译指令，　　　

   compass compile app.scss

　　  如果你需要频繁地修改sass文件，那么可以使用下面的指令实时监听指定的scss文件，当文件发生改变时，它将自动编译：　　

　　compass watch app.scss

　　 为了便于后面的演示，我们这里使用watch的指令，如图：

　　

　　

注意，官方样式和自定义样式不能同时使用，比如你使用了官方的其他样式，再使用自定义样式，自定义样式是不起作用的。必须是在创建项目时的默认样式下，使用自定义样式

注意，当出现overwrite的时候才代表你的文件修改成功并被覆盖了，否则运行的是之前的css样式，此时我们可以运行我们的项目，效果如下

修改前：　　　　　　　　　　　　　　　　　　　　　　　　修改后：

　　                        

　　我们可以看到，我们的主题色由蓝色变成了黑色，是不是很神奇，

　　接着上面cssVars的演示，我们再来演示下cssmixins的演示：

　　我们来给我们的项目添加一个tabpanel的tabbar的样式：

　　

　　设置它的样式名为gray，背景色为灰色，前景色为蓝色，

　　注意：cssmixins的参数要写在@important下，否则会无效

　　由于我们使用的compass watch指令，这里会进行自动编译，等待override的结果出现后，我们修改我们项目代码

　　view/Main.js中的代码，给tabpanel加上一个ui:"gray"即给我们的tabpanel定义了gray样式

　　

　　我们运行项目，可以看到，我们的tabbar的颜色改变了：

　　

 

　　官方文档中还封装了很多的样式api，具体大家可以自己去尝试，对于compass编译scss文件的输出路径，大家可以在sass文件夹下的config.rb文件中进行修改，

　　

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework automatically.
//引用的文件路径，位于touch/resources/themes下
//官方的sass文件都封装在这个目录下
//有兴趣的同学可以到这个文件夹下研究下官方文章的sass文件
load File.join(dir, '..', '..', 'touch', 'resources', 'themes')

# Compass configurations
sass_path = dir
//编译的输出路径，位于上层目录的css文件夹下即../css
css_path = File.join(dir, "..", "css")

# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production

 

 

　　好了，这讲我们介绍了使用官方api中的属性来定义和修改样式，