sencha touch2 自定义样式(theme)_lihongxun945的博客-程序员宅基地

技术标签: sencha touch2  javascript  

在上一篇中提过,sencha touch使用的是sass来写css,用compass打包压缩。

用户自己编写的样式文件,默认的入口是resources/sass/app.sass。

关于sass文件的组织,如果是比较简单的项目,一个app.scss就足够了,如果是比较大的项目,可以把app.scss当做入口文件,里面引入其他的scss模块即可。

默认的主题是default theme,路径是:sdk/resources/themes/stylesheets/sencha-touch/default

看一下它的文件结构:

.
├── _all.scss
├── _core.scss
├── _global.scss
├── _mixins.scss
├── _variables.scss
├── _widgets.scss
├── core
│   ├── _core.scss
│   ├── _layout.scss
│   └── _reset.scss
└── widgets
    ├── _buttons.scss
    ├── _carousel.scss
    ├── _form-sliders-basic.scss
    ├── _form-sliders.scss
    ├── _form.scss
    ├── _img.scss
    ├── _indexbar.scss
    ├── _list.scss
    ├── _loading-spinner.scss
    ├── _map.scss
    ├── _media.scss
    ├── _msgbox.scss
    ├── _panel.scss
    ├── _picker.scss
    ├── _sheets.scss
    ├── _tabs.scss
    ├── _toolbar-forms.scss
    └── _toolbar.scss

其中 最重要的一个文件是_variables.scss,定义了很多全局变量,控制了颜色、行号、字号、渐变等基本样式,下面的很多组件都是直接使用这个变量或者在这些变量上进行运算得到自己的样式。

比如比较重要的几个变量:

$base-color:全局颜色,默认是#1985D0,一种深蓝色。

$base-gradient:渐变,默认是突出效果的,还有matte - bevel - glossy - recessed - flat 可选。

$active-color: 被激活组件的颜色,比如被选中的列表项

通过自定义globalcss可以很直接地改变大部分组件的样式。


如果想改变某个特定组件的样式,可以先去看该组件对应的sass文件,比如我想修改list列表的颜色。

先找到widgets/_list.scss文件,打开发现文件开头就定义了一堆变量:

$list-color: #000 !default; 默认文字颜色是黑色

$list-bg-color: #f7f7f7 !default;默认背景是浅灰色

$list-pressed-color: lighten($active-color, 50%) !default; 列表项被按下的颜色

$list-active-color: $active-color !default; 列表项被选中的颜色

自定义这些变量可以很简单的自定义列表样式。


知道如何通过自定义变量来实现自定义主题,下面就是如何组织app.sass文件,对于单个sass文件一般是如下的格式,拆分成多个文件的也是类似的:

//1 ,自定义变量,实现基本的样式定制,因为要覆盖默认样式(就是 !default的样式),所以要写在最前面。

$base-color: #ff0000;

$list-bg-color: #F4F4F4;

//.......

//2,导入需要用到的模块,尽量只选择自己用到的,以免css文件过大

@include sencha-panel;

@include sencha-buttons;

//......

//3,对于通过自定义变量无法实现的样式需求,在这里直接重写样式

@mixin sencha-list {

//....

}

//4,下面是自己的样式,当然最好是拆分成多个模块,在这里分别import

.app {

    .loading {

    //....

    }

}


上面只是粗略的划分了四部分,其中对于第四部分自己的样式,可以更细分(比如变量,mixin,组件,页面等)

对于拆分成多个sass文件的,基本原理也是一样的。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lihongxun945/article/details/8299293

智能推荐

关于字符数组以及字符串数组_一尾鱼汤的博客-程序员宅基地

例题13://13.编写一程序,将两个字符串连接起来,结果取代第一个字符串(mark下来加深印象),加油加油加油!(1)自己编写一个strcat函数int main(){ int strcat(char a[100],char b[100]); char a[100]={0}, b[100]={0}; //初始化字符数组; int i=0,j=0; cout<<"请输入两个字符串:"; cin>>a>>b;

Python配置Qt Designer与PyUIC_热心市民付先生的博客-程序员宅基地_python pyuic

Python配置Qt Designer与PyUIC安装pyqt相关包pip install pyqtpip install pyqt5-toolsPyCharm中选择相应的python解释器3. 添加外部工具名称填写自己方便易记得即可,我的名称添加为QTDesigner程序选择designer.exe,位置为当前解释器路径下的Lib\site-packages\pyqt5-tools\designer.exe工作目录为当前项目文件的目录添加选择完毕界面为:确定即可,再次

关于WebSocket_彪彪_的博客-程序员宅基地

原文链接:https://www.liaoxuefeng.com/wiki/1022910821149312/1103303693824096WebSocket是HTML5新增的协议,它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道,比如说,服务器可以在任意时刻发送消息给浏览器。为什么传统的HTTP协议不能做到WebSocket实现的功能?这是因为HTTP协议是一个请求-响应协议,...

FineUI初学手册_star_2008_的博客-程序员宅基地

女朋友鄙视我原创少...1.下载 进入官方论坛:http://www.fineui.com/bbs/要用到下载源代码和空项目下载http://fineui.codeplex.com/http://fineui.com/bbs/forum.php?mod=viewthread&tid=2123源代码直接下载,注意FineUI版本空项目里下载 对应版本的空项

NSStringDrawingOptions_yinachong的博客-程序员宅基地

NSStringDrawingTruncatesLastVisibleLine:如果文本内容超出指定的矩形限制,文本将被截去并在最后一个字符后加上省略号。如果没有指定NSStringDrawingUsesLineFragmentOrigin选项,则该选项被忽略。NSStringDrawingUsesLineFragmentOrigin:绘制文本时使用 line fragement or

随便推点

Composer常见问题汇总_cicibi6696的博客-程序员宅基地

问题一: [Composer\Downloader\TransportException] ...

什么时候不能使用箭头函数_一水茶缘YY的博客-程序员宅基地

共 2670 字,读完需 5 分钟。编译自 Dmitri Pavlutin 的文章,对原文内容做了精简和代码风格优化。ES6 中引入的箭头函数可以让我们写出更简洁的代码,但是部分场景下使用箭头函数会带来严重的问题,有哪些场景?会导致什么问题?该怎么解决,容我慢慢道来。能见证每天在用的编程语言不断演化是一件让人非常兴奋的事情,从错误中学习、探索更好的语言实现、创造新的语言特性是推动编程语言版本迭代的动

vassist的安装_kgduu的博客-程序员宅基地

在网上下载vassist安装压缩文件。1、运行VA_X_Setup

全方位讲解VoIP 的原理及技术知识_demon_evil的博客-程序员宅基地_voip工作原理

通过因特网进行语音通信是一个非常复杂的系统工程,其应用面很广,因此涉及的技术也特别多,其中最根本的技术是VoIP (Voice over IP)技术,可以说,因特网语音通信是VoIP技术的一个最典型的、也是最有前景的应用领域。因此在讨论用因特网进行语音通信之前,有必要首先分析VoIP的基本原理,以及VoIP中的相关技术问题。一、VoIP的基本传输过程传统的电话网是以电路交换方式传输语音,所要求的传

安卓设备抓包_Japher的博客-程序员宅基地

命令: adb shell su mount -o remount rw(空格)/  /data/local/tcpdump -p -vv -s 0 -w /sdcard/capture.pcap