vue 项目中 sass 如何复用？

前言：vue项目中，我们在使用scss编写代码的时候，有些时候可能会有很多样式代码是重复的，这个时候我们可以把公共的部分提取出来，文件结构如下图：

步骤1：
在assets目录下新建css目录，存放css资源，在css目录下新建styles.scss 文件，编写代码如下：

@mixin publicCss($width,$height){ 
    //publicCss是css方法； $width和$height是入参变量,动态变化
    .childBox {
        > div {
            width: $width;
            height: $width;
            background: red;
        }
    }
}

步骤2：
在About.vue页面内使用公共的sass文件，代码如下：

<template>
  <div class="box">
    <div class="childBox">
      <div>
        子孙盒子样式
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang="scss" scope>
@import "@/assets/css/styles.scss";
//先导入公用scss文件
.box {
  font-size: 16px;
  @include publicCss(200px, 200px);
  //使用include方法导入publicCss方法，后面200px是入参
}
</style>

结果会发现，子孙盒子加上了宽高200px,背景色红色的样式

end!