sencha touch 扩展篇之使用sass自定义主题样式 （上）使用官方的api修改主题样式

      大家知道，sencha touch是通过我们写的js代码来动态渲染单页面生成一个个div+css的html页面来模拟app应用，那么既然是div+css结构的，我们就可以通过修改css样式来自定义我们app的主题跟样式。

　　在sencha touch中，已经默认提供了一些主题样式，我们可以在下载的sencha touch sdk路径下的touch-building/resources/css和touch-building/resources/css-debug文件夹下找到这些样式文件，css文件夹中是压缩过的css文件，css-debug文件夹下是未压缩的css文件，可以方便你查看阅读。

　　在使用sencha cmd生成的项目的touch/resources/css 路径下也能找到上述的css文件，如下：

　　

　　大家可以通过修改生成的项目中的app.json文件中对css文件的引用来调用这些css，也可以将这些css改名后覆盖项目下resources/css中的app.css来使用这些样式，还可以通过在app.json中配置plateform来通过参数跟环境进行自动调用,这不是本讲的重点，在这里就不多做介绍了　

"css": [
    {
        "path": "resources/css/sencha-touch.css",
        "platform": ["chrome", "safari", "ios", "ios-classic", "android", "firefox"]
    }
]

上面的每个css文件的效果大家可以自己去实验，我们也不进行演示了。

　　

　　使用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

 

　　

　　在简单了解了sass之后，我们就开始进入正题：如何通过sass来自定义我们的主题样式呢？

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

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

　　（注：sencha cmd 4.0开始可以不用安装haml，直接使用sencha app watch指令来进行sass监听和编译）

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

 sudo gem install haml
 sudo gem install compass

　　如果是windows环境，键入：　　

gem install haml
gem install compass

　　等待安装完毕，通过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中的属性来定义和修改样式，

　　下一讲，我们将介绍大家最常用的也是问题最多的自定义图标，以及通过自己的css来修改官方组件的样式