1、变量$name
2、#ID｛里面子元素选择｝，嵌套避免重复
3、父选择器&代替
4、类似于jQ的空格 > ~ +
<div class="pending-info"></div>
<style lang="scss" scoped>
@mixin layout-main ($bg-c, $bor-c, $title-c, $context-c, $icon-link) {
.left {
.status-icon {
background: url($icon-link) center no-repeat;
}
background:$bor-c;
border-radius:2px;
}
.right-text {
.title {
color:$title-c;
}
.content {
color:$context-c;
line-height:15px;
}
}
background:$bg-c;
border-radius:2px;
border:1px solid $bor-c;
}
.unsubmit-info {
@include layout-main(#FFFCF2, #EFDC93, #7D6F3B, #998D62, '~assets/img/icon/icon_tips_1.png');
}
.pending-info {
@include layout-main(#FFFCF2, #EFDC93, #7D6F3B, #998D62, '~assets/img/icon/icon_tips_3.png');
}
</style>
