less使用mixin抽取css公共代码，减少重复代码

由于没有系统的学习less，之前只用到less的嵌套写法，很少用变量，基本没用mixin模块化封装，这次尝试了下，发现还是不错的，下面来用封装一个基础的布局组件，主要涉及三个知识点

1. 把css单独提成文件使用 @import (reference) url('') 引入
2. 封装mixin函数，在需要引入的地方执行函数
3. 使用 @headerHeight: 100px 这种方法定义变量

示例如下，完成代码：less mixin封装测试 | github

<!-- pageA -->
<template>
  <div class="container">
    <div class="top"></div>
    <div class="main">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
@import (reference) url('./common/base.less');
.container-mixin(); /* 调用base.less里面定义的mixin方法 */
</style>

common/base.less

.container-mixin() {
  .container {
    @headerHeight: 100px; /* 变量，顶部高度 */
    .top {
      height: @headerHeight;
      background: #999;
    }
    .main {
      display: flex;
      height: calc(100vh - @headerHeight);
      background-color: rgba(255, 0, 0, 0.2);
      .left {
        width: 20%;
        background-color: greenyellow;
      }
      .right {
        width: 80%;
        background-color: turquoise;
      }
    }
  }
}

公共方法封装的好处在于，下次如果相同的页面，就不需要再写一遍了，虽然用class也可以，但less的mixin会更加强大，灵活，他还可以传参数，我们在页面B引入时，可以对默认样式进行修改

<template>
  <div class="container">
    <div class="top"></div>
    <div class="main">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
@import (reference) url('./common/base.less');
.container-mixin();
// 引入公共样式后，再修改部分公共的样式
.container {
  .top {
    background: red;
  }
}
</style>

上面的例子中使用 (reference) 是为了防止在不同的组件中引入导致公共代码多次打包问题