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
复制代码
posted @ 2014-12-24 14:56  lanyan  阅读(316)  评论(0编辑  收藏  举报