@mixin与@include；@import与@extend； /deep/

在维护和开发项目时，为了提高效率，会有代码的重复利用。在Sass中，除了@import和@extend增加代码的重复利用性，当然@mixin指令也有同样的效果。

@extend指令通过继承从而简化了代码，但是不够灵活，还会将你不想要的别的地方的相同的类名全部都继承。

@mixin指令是另一种简化代码的方法。Mixins可以包含任意内容且可以传递参数，因此比’@extend’更加灵活和强大。

@mixin +类名 来进行使用

<style lang="scss" scoped>
  @mixin overflow-hiding {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .el-select {
    width: 100%;
    .el-select__tags {
      .el-tag {
        position: relative;
        padding-right: 20px;
        @include overflow-hiding
      }
      /deep/ .el-tag__close {
        position: absolute;
        right: 0;
        top: 5px
      }
    }
  }
  .el-select-dropdown {
    /deep/ .el-select-dropdown__empty {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-size: 14px;
    }
  }
</style>

/deep/ 深度选择器

在 跟组件 和子组件 可能会有相同的 类名进行 css样式 ，但是这样会影响子组件的样式 在添加scoped之后 会在后面加上一个hash值。
但这样存在另个问题，比如你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不用别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。

.el-select-dropdown {
    /deep/ .el-select-dropdown__empty {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-size: 14px;
    }
  }

当然了把 /deep/ 换成 >>>，也可以达到同样的效果。