常用的sass的开发的初始化方法

flex布局

@mixin flex($dire: row, $just: center, $aligh: center) {
  display: flex;
  flex-direction: $dire;
  justify-content: $just;
  align-items: $aligh;
}

超出隐藏

// $line:超出显示几行省略号
// $substract:预留区域百分比
@mixin text-hid($line: 1, $substract: 0) {
  overflow: hidden;
  @if $line==1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100% -$substract;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
  }
}

使用

div{
    @include text-hid(1,25);
}

3，定位居中

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