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%);
}