混入样式

上下左右居中

@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

flex 上下左右居中

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

单行溢出隐藏

@mixin ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行溢出隐藏

@mixin ellipsisMul($line: 3, $line-height: 1.2) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  line-height: $line-height;
}

全屏遮罩

@mixin mask($color: rgba(0, 0, 0, .2)) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color;
}

清除浮动

@mixin clearfix {
  &:after{
    content: '',
    display: table;
    clear: both;
  }
}