大家知道,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来修改官方组件的样式

    

    

sencha touch 扩展篇之使用sass自定义主题样式 (上)使用官方的api修改主题样式的更多相关文章

  1. sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标

    上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...

  2. sencha touch 扩展篇之将sencha touch打包成安装程序(上)- 使用sencha cmd打包安装程序

    由于最近一直忙着android原生的开发,很久没有更新博客了,官方的sencha cmd工具功能非常强大,创建项目,压缩项目,打包安装程序都能轻松实现,这讲我们就给大家介绍下如何使用sencha cm ...

  3. sencha touch 扩展篇之将sencha touch打包成安装程序(下)- 使用phonegap打包安装程序

        这讲我们来讲解下如何使用phonegapa创建项目环境并通过她们将sencha touch打包成app,这里我们只讲解打包android的apk,打包ios的过程有点类似,但是需要在mac环境 ...

  4. Sencha Touch 2.2.1 Custom Icon 自定义图标

    ST2.2版本竟然又改变了sass中自定义图标的添加方式,在2.2以前采用的是这种base64的方式,详见:http://www.cnblogs.com/qidian10/archive/2012/1 ...

  5. 【转载】Sencha Touch 提高篇 组件选择器

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:威老     原文地址:http://www.cnblogs.com/weil ...

  6. Sencha Touch 扩展集合

    https://market.sencha.com/extensions http://try.sencha.com/touch/2.1.0/ http://www.mitchellsimoens.c ...

  7. sencha touch 扩展官方NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮(2014-5-15)

    扩展视频讲解:http://www.cnblogs.com/mlzs/p/3652094.html官方NavigationView详解:http://www.cnblogs.com/mlzs/p/35 ...

  8. 自定义input文件上传 file的提示文字及样式

    简单记录一下 效果图: 代码: <input class="aload" type='button' value='上传附件' onClick='javascript:$(& ...

  9. 【翻译】Sencha Touch 2入门:创建一个实用的天气应用程序之三

    原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a ...

随机推荐

  1. C/C++捕获段错误,打印出错的具体位置(精确到哪一行)_转

    转自:C/C++捕获段错误,打印出错的具体位置(精确到哪一行) 修订:2013-02-16 其实还可以使用 glibc 的 backtrace_symbols 函数,把栈帧各返回地址里面的数字地址翻译 ...

  2. Hibernate-【查询】

    01.HQL查询方式 02.QBC查询方式 02.原始SQL查询方式

  3. kettle优化

    http://blog.csdn.net/cissyring/archive/2008/05/29/2494130.aspx 1. Join 我得到A 数据流(不管是基于文件或数据库),A包含fiel ...

  4. C++11 新特性:Lambda 表达式

    参考文章:https://blogs.oracle.com/pcarlini/entry/c_1x_tidbits_lambda_expressions 或许,Lambda 表达式算得上是 C++ 1 ...

  5. 关于Cocos2d-x属性和引用

    在HelloScene.h文件里面的Private定义一个Size类型的变量visibleSize,然后在HelloScene.cpp里面引用HelloScene.h,再在HelloScene::in ...

  6. javascript中字符串拼接详解

    字符串拼接是所有程序设计语言都需要的操作.当拼接结果较长时,如何保证效率就成为一个很重要的问题.本文介绍的是Javascript中的字符串拼接,希望对你有帮助,一起来看.   最近在研究<jav ...

  7. 【转】MFC CListCtrl 使用技巧

    以下未经说明,listctrl默认view 风格为report 相关类及处理函数 MFC:CListCtrl类 SDK:以 “ListView_”开头的一些宏.如 ListView_InsertCol ...

  8. android hardware.c 源码分析

    android的jni通过ID来找hal模块,使用了hw_get_module()函数,本文就通过这个函数的来分析一下hal层的模块是如何匹配的. 首先要了解三个结构体hw_module_t,hw_m ...

  9. 【AngularJS】AngularJS整合Springmvc、Mybatis环境搭建

    近期想学习AngularJS的使用,网上搜了一圈后,折腾了半天解决bug后,成功使用AngularJS整合Springmvc.Spring.Mybatis搭建了一个开发环境.(这里Spring使用的版 ...

  10. js 补零方法,如果不足位数

    var pad = function() { var tbl = []; return function(num, n) { var len = n-num.toString().length; if ...