常用 SCSS 宏

显示省略号

// 单行省略号
@mixin ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行省略号
@mixin ellipsis-multi($line) {
  display: -webkit-box;
  -webkit-line-clamp: $line;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

滚动

@mixin scroll($type: 'y') {
  @if $type == 'x' {
    overflow-x: auto;
    overflow-y: hidden;
  } @else if $type == 'y' {
    overflow-x: hidden;
    overflow-y: auto;
  } @else {
    overflow: auto;
  }
  -webkit-overflow-scrolling: touch;
}

1
2
3
4
5
6
7
8
9
10
11
12

垂直居中

@mixin flex-center($direction: 'row') {
  display: flex;
  @if $direction != 'row' {
    flex-direction: $direction;
  }
  justify-content: center;
  align-items: center;
}

1
2
3
4
5
6
7
8