ionic3主题设置之进阶篇

原文出处：https://www.jianshu.com/p/e0e39fea3ae2 （原文更易阅读）

前言：因为我们是在theme/variables.scss建立了两个不同的主题，但是主题里的内容80%到90%是一样的，由此我们可以优化一次sacc代码；
例子如下：

1、在theme下面建立一个common.css，这里用于存放公共的scss

//tool-bar
.toolbar-ios-primary .toolbar-background-ios{
  background: $primary;
}
//tab
.tab-button[aria-selected=true] {
  color: $primary !important;
}
.tabs-ios .tab-button[aria-selected=true] .tab-button-icon{
  color: $primary !important;
}
//  button
.button-ios-primary{
  background-color: $primary;
}
.button-outline-ios{
  color: $primary;
  border-color: $primary;
}
.button-ios-primary.activated{
  background-color: $primary;
}
//segment-md
.segment-md .segment-button.segment-activated{
  border-color: $primary !important;
  color: $primary !important;
}

2、在theme/variables.scss引入公共方法，并给变量赋值， common.scss一定要引入两次，并且是在class里引入，否则会报错找不到变量，common.scss里只引用变量，变量没有在里面赋值。
（由于scss不能像jq一样写公共方法，所以这里用一个class包住）

.default-theme {
  $primary: #488aff;
  @import "common";
}
.pink-theme {
  $primary: #FFB6C1;
  @import "common";
}