常用的一些minxi
@mixin clearfix {
&:after {
clear: both;
content: '.';
display: block;
height: 0;
line-height: 0;
overflow: hidden;
}
}
// 超出省略
@mixin ellipsis($line: 1) {
overflow: hidden;
text-overflow: ellipsis;
@if ($line == 1) {
white-space: nowrap;
} @else {
display: -webkit-box;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
}
}
// 扩展点击热区
@mixin hot-area($extend: 10) {
position: relative;
&::after {
content: '';
position: absolute;
left: -$extend + px;
top: -$extend + px;
right: -$extend + px;
bottom: -$extend + px;
background-color: transparent;
}
}
// 隐藏滚动条
@mixin hide-scrollbar {
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
}
// 文字,左右两端对齐
@mixin label-justify {
text-align-last: justify;
text-align: justify;
&::after {
content: ' ';
display: inline-block;
width: 100%;
}
}
// 1px 处理
@mixin border1px($width, $style, $color, $align,$radius) {
&::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 125%;
transform-origin: 0 0;
transform: scaleY(0.8);
box-sizing: border-box;
border-radius: $radius;
@if $align=='' {
border: $width $style $color;
} @else {
border-#{$align}: $width $style $color;
}
}
}
// 垂直居中
@mixin position-center {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
// flex 布局
@mixin flex($x:'space-between', $y:'center', $wrap: 'nowrap') {
display: flex;
justify-content: $x;
align-items: $y;
@if $wrap=='wrap' {
flex-wrap: wrap;
}
@else {
flex-wrap: nowrap;
}
}
// 清楚浮动
@mixin clearfix {
&:after {
clear: both;
content: '.';
display: block;
height: 0;
line-height: 0;
overflow: hidden;
}
}
// 超出省略
@mixin ellipsis($line: 1) {
overflow: hidden;
text-overflow: ellipsis;
@if ($line==1) {
white-space: nowrap;
}
@else {
display: -webkit-box;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
}
}
// 文字,左右两端对齐
@mixin label-justify {
text-align-last: justify;
text-align: justify;
&::after {
content: ' ';
display: inline-block;
width: 100%;
}
}
// 生成对应的margin及padding样式
$position:('top', 'right', 'bottom', 'left');
@for $i from 1 through 100 {
@each $p in $position {
.margin-#{$p}__#{$i} {
margin-#{$p}: $i+ px;
}
.padding-#{$p}__#{$i} {
padding-#{$p}: $i+ px;
}
}
}