常用 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
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
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
2
3
4
5
6
7
8