大家知道,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. ASP.NET中上传图片检测其是否为真实的图片 防范病毒上传至服务器

    一.需求 我们在用.net开发网站时,经常会用到图片上传,可以说是每个网站必备的,大到门户网站,电商网站,政务系统,OA系统,小到企业网站,个人网站,博客网站,导航网站等等,都有用到图片上传,那么在客 ...

  2. Node.js Streams:你需要知道的一切

    Node.js Streams:你需要知道的一切 图像来源 Node.js流以难以使用而闻名,甚至更难理解.好吧,我有个好消息 - 不再是这样了. 多年来,开发人员在那里创建了许多软件包,其唯一目的是 ...

  3. iOS边练边学--UINavigationController导航条的使用

    一.使用UINavigationController的步骤以及代码 // 程序加载完成后执行的代码 - (BOOL)application:(UIApplication *)application d ...

  4. java-基于Servlet3.0的文件上传

    Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet3.0中使用request.getParts()获取上传文件

  5. Maqetta源码运行

    一.Maqetta简介 Maqetta是IBM开发的一个创建桌面和移动用户界面的HTML5设计编辑工具.该项目已经捐助给开源机构Dojo基金会.Maqetta提供WYSIWYG可视化HTML5用户界面 ...

  6. D方法 自动完成

    控制器 public function insert(){ $Wztj = D("Wztj");if($vo=$Wztj->create()){ if($Wztj->a ...

  7. gsoap 学习 1-如何使用

    新年伊始,想把onvif和gsoap boa这三个东西学习下,并作下笔记,当然为了省时间,我昨天下午看了一个下午的gsaop官网pdf感触良多,也做了小测试,废话少说,一下也有一些是摘自网友博客,大部 ...

  8. CentOS下添加sudo用户

    一 .sodo的使用 1.1 关于sudo Sudo是linux系统中,非root权限的用户提升自己权限来执行某些特性命令的方式,它使普通用户在不知道超级用户的密码的情况下,也可以暂时的获得root权 ...

  9. CentOS下screen 命令详解

    一.背景 系统管理员经常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,比如系统备份.ftp 传输等等.通常情况下我们都是为每一个这样的任务开一个远 ...

  10. 修改php上传文件尺寸、响应时间、时区时间等设置

    修改php上传文件尺寸.响应时间 1.修改php.ini 1.post_max_size 指通过表单POST给PHP的所能接收的最大值,包括表单里的所有值,默认为8M(改为150M),看你自己需要进行 ...