原文出处: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";
}