mixin的使用

• 在scss文件夹中新建一个mixin.scss，在需要使用此类样式的页面中引入

• 未使用 mixin.scss

<style lang="scss">
@import '../assets/scss/base.scss';
.header {
  .nav-topbar {
    height: 39px;
    line-height: 39px;
    background-color: #333333;
    color: #b0b0b0;
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      a {
        display: inline-block;
        color: #b0b0b0;
        margin-right: 17px;
      }
      .my-cart {
        width: 110px;
        background-color: #ff6600;
        color: #ffffff;
        text-align: center;
        margin-right: 0;
        .icon-cart {
           display: inline-block;
           width: 16px;
           height: 12px;
           background: url("/imgs/icon-cart-checked.png") no-repeat center;
           background-size: contain;
           margin-right: 4px;
        }
      }
    }
  }
  .nav-header {
    .container {
      height: 112px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .header-logo {
        display: inline-block;
        width: 55px;
        height: 55px;
        background-color: #ff6600;
        a {
          display: inline-block;
          width: 110px;
          height: 55px;
          &::before {
            content: " ";
            display: inline-block;
            width: 55px;
            height: 55px;
            background: url("/imgs/mi-logo.png") no-repeat center;
            background-size: contain;
            transition: margin 0.2s;
          }
          &::after {
            content: " ";
            display: inline-block;
            width: 55px;
            height: 55px;
            background: url("/imgs/mi-home.png") no-repeat center;
            background-size: contain;
          }
          &:hover::before {
            margin-left: -55px;
            transition: margin 0.2s;
          }
        }
      }
      .header-menu{
          display: inline-block;
          padding-left: 264px;
          width: 588px;
          .item-menu{
              display: inline-block;
              font-size: 16px;
              color: #333333;
              font-weight: bold;
              margin-right: 20px;
              line-height: 112px;
              span{
                  cursor: pointer;
              }
          }
      }
      .header-search{
          width: 319px;
          .wrapper{
              height: 50px;
              border: 1px solid #E0E0E0;
              display: flex;
              align-items: center;
              input{
                  border: none;
                  width: 264px;
                  height: 50px;
                  border-right: 1px solid #E0E0E0;
                  padding-left: 14px;
                  box-sizing: border-box;
              }
              a{
                  display: inline-block;
                  width: 18px;
                  height: 18px;
                  background: url('/imgs/icon-search.png') no-repeat center;
                  background-size: contain;
                  margin-left: 17.5px;
              }
          }
      }
    }
  }
}
</style>

• mixin.scss

// flex布局复用
@mixin flex($hov:space-between,$col:center){
  display: flex;
  justify-content: $hov;
  align-items: $col;
}
@mixin bgImg($w:0,$h:0,$img:'',$size:contain){
  display: inline-block;
  width: $w;
  height: $h;
  background: url($img) no-repeat center;
  background-size: $size;
  margin-right: 4px;
}

• 使用 mixin.scss

<style lang="scss">
@import '../assets/scss/base.scss';
@import '../assets/scss/mixin.scss';
.header {
  .nav-topbar {
    height: 39px;
    line-height: 39px;
    background-color: #333333;
    color: #b0b0b0;
    .container {
      @include flex();
      a {
        display: inline-block;
        color: #b0b0b0;
        margin-right: 17px;
      }
      .my-cart {
        width: 110px;
        background-color: #ff6600;
        color: #ffffff;
        text-align: center;
        margin-right: 0;
        .icon-cart {
          @include bgImg(16px,12px,'/imgs/icon-cart-checked.png'); 
          margin-right: 4px;
        }
      }
    }
  }
  .nav-header {
    .container {
      height: 112px;
      @include flex();
      .header-logo {
        display: inline-block;
        width: 55px;
        height: 55px;
        background-color: #ff6600;
        a {
          display: inline-block;
          width: 110px;
          height: 55px;
          &::before {
            content: " ";
            display: inline-block;
            @include bgImg(55px,55px,'/imgs/mi-logo.png'); 
            transition: margin 0.2s;
          }
          &::after {
            content: " ";
            display: inline-block;
            @include bgImg(55px,55px,'/imgs/mi-home.png'); 
          }
          &:hover::before {
            margin-left: -55px;
            transition: margin 0.2s;
          }
        }
      }
      .header-menu{
          display: inline-block;
          padding-left: 264px;
          width: 588px;
          .item-menu{
              display: inline-block;
              font-size: 16px;
              color: #333333;
              font-weight: bold;
              margin-right: 20px;
              line-height: 112px;
              span{
                  cursor: pointer;
              }
          }
      }
      .header-search{
          width: 319px;
          .wrapper{
              height: 50px;
              border: 1px solid #E0E0E0;
              display: flex;
              align-items: center;
              input{
                  border: none;
                  width: 264px;
                  height: 50px;
                  border-right: 1px solid #E0E0E0;
                  padding-left: 14px;
                  box-sizing: border-box;
              }
              a{
                  @include bgImg(18px,18px,'/imgs/icon-search.png'); 
                  margin-left: 17.5px;
              }
          }
      }
    }
  }
}
</style>