二、Sass-css预处理器

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>