CSS
常用 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;
}滚动
@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;
}垂直居中
@mixin flex-center($direction: 'row') {
display: flex;
@if $direction != 'row' {
flex-direction: $direction;
}
justify-content: center;
align-items: center;
}