Ionic2之自定义css（scss）方法

Ionic2之自定义css（scss）避免页面影响

对于ionic2来说，彻底的把每个页面独立了出来，每个页面分别对应三个文件。例如“page1”分别对应的文件是：page.ts ， page.html ， page.scss 。

       其中page.html：文件是写界面布局的

       其中page.ts是页面数据逻辑控制的

其中page.scss 就是写css样式的文件

 

以下为一些使用经验，（因为是新手，在探索）

1.page.html文件里写ionic提供的控件，比如：ion-header,ion-content, ion-title,ion-toobar,经管如此，有时候满足不了项目的界面，我们需要结合HTML的基本命令来完成设计，比如：div，p， img，a，等。

 

2.scss使用经验：每个页面都有自己的scss文件，我在使用时，发现几个页面的css定义会影响，就是页面2可以用页面1的css定义造成干扰的现象，后来发现，每个scss文件里有个页面定义，我们只要把当前页面的css定义放在这个页面定义就行，实现了css分离。（）本人刚学习网页编程，一切都在探索中）。示例如下：

page-page3 {

 

.page {

    display: flex;

    align-items: center;

    text-align: center;

    margin: 0 auto;

    height: 100%;

    background-color: #abaaaa;

    padding-top: 5px;

    padding-bottom: 5px;

  //  margin-top: 2px;

}

}

这个page属性就放在了page-page3的大括号里面，保证了这个css定义只影响当前页面。

 

另外就是，平时应用于网页的css属性都可以应用到ionic的布局中。可以修改每个控件的各个元素。通过浏览器调试模式我们可以看到某个元素使用的css样式。我们可以参考其样式属性，然后在其基础上修改属性并写到我们每个页面对应的scss文件里。就可实现效果。但是需要你自己起一个新的名字，不然就会把inic的默认css参数修改掉。当然如果你放到自定义文件的范围约（page-page3）定应该也不会干扰。