Ionic2实战-框架样式自定义

前言

对于拥有众多页面的App来说,首先考虑的就是如何写样式,样式分三种:1、框架级样式;2、自定义全局样式;3、自定义页面私有样式。
本节主要讲这三种样式如何分别定义。

步骤

1、框架级样式
image.png

如上图,框架初始化好以后会自动生成variables.scss文件,在该scss文件内定义的样式作用范围为全局,一般如果要覆盖框架的默认样式可以直接在该文件内进行覆盖。

2、自定义全局样式

自定义全局样式可以直接写在variables.scss文件内,也可以单独定义一个scss文件,然后通过“@import "main"”的形式引入variables.scss文件内,均可作用于全局。

3、自定义页面私有样式

页面私有样式配合页面html和ts文件使用,只作用于指定页面,如下图:

image.png
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,715评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,226评论 4 61
  • 早上,在辅导孩子作业的时候,手机上任务挑战失败的提醒让我大吃一惊,竟然没有挑战成功!?这个结果让我感觉沮丧。因此整...
    小小山药阅读 1,748评论 2 0
  • 今天把《古文观止》拿出来,因为家里爸妈不曾读,封面上已经落上灰尘。我用手拂去灰尘,生怕对它不恭。翻开目录瞥了一眼从...
    1999Frederic阅读 1,859评论 0 1