//设置容器
@mixin size($width:auto,$height:auto,$bg:null,$lh:false,$rd:null,$ag:null,$dp:null,$bd:null,$cp:false,$of:null) {
    width:$width;
    height:$height;
    @if $bg{
        background-color:$bg;
    }
    @if $lh{
        line-height: $height;
    }
    @if $rd{
        border-radius: $rd;
    }
    @if $ag{
        text-align: $ag;
    }
    @if $dp{
        display: $dp;
    }
    @if $bd{
        border:$bd;
    }
    @if $cp{
        cursor: pointer;
    }
    @if $of{
        overflow: $of;
    }
}
//设置字体
@mixin font($color:#fff,$size:14px,$sp:null,$dc:null,$ws:false,$cp:false,$ff:null){
    color:$color;
    font-size:$size;
    @if $sp {
        letter-spacing:$sp;
    }
    @if $dc {
        text-decoration: $dc;
    }
    @if $ws{
        white-space:nowrap;
    }
    @if $cp{
        cursor: pointer;
    }
    @if $ff{
        font-family: $ff;
    }
}
//绝对定位撑满容器
@mixin absolute-full($top:0,$right:0,$bottom:0,$left:0,$zi:null){
    position: absolute;
    top:$top;
    right:$right;
    bottom:$bottom;
    left:$left;
    @if $zi{
        z-index:$zi
    }
}
//绝对定位 top left
@mixin absolute-top-left($top:0,$left:0){
    position: absolute;
    top:$top;
    left:$left;
}
//绝对定位 top right
@mixin absolute-top-right($top:0,$right:0){
    position: absolute;
    top:$top;
    right:$right;
}
//绝对定位 bottom left
@mixin absolute-bottom-left($bottom:0,$left:0){
    position: absolute;
    bottom:$bottom;
    left:$left;
}
//绝对定位 bottom right
@mixin absolute-bottom-right($bottom:0,$right:0){
    position: absolute;
    bottom:$bottom;
    right:$right;
}
//设置背景
@mixin background($type:'color',$val:#fff){
    @if $type == 'color' {
        background-color: $val;
    }@else if $type == 'img' {
        background-image: $val;
        background-size: 100%;
    }
}
// 文字省略：单行
.text-oneline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

//不知宽高的元素绝对居中
.el-center {
    @include absolute-top-left(50%,50%);
    transform: translate(-50%,-50%);
}
//相对定位
.relative{
    position: relative;
}
//相对定位垂直居中
.middle{
    position: relative;
    top:50%;
    transform: translateY(-50%);
}
//滚动条样式
@mixin scrollBarStyle($w:2px,$h:2px,$c:#989ba380) {
    &::-webkit-scrollbar {
        width: $w;
        height: $h;
        display: none;
    }
    &:hover::-webkit-scrollbar{
        display: block;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background:$c;
    }
}

//滚动条样式
@mixin scrollBarStyle1($w:2px,$h:2px,$c:#989ba380) {
    &::-webkit-scrollbar {
        width: $w;
        height: $h;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background:$c;
    }
}