spms-vue/src/styles/mixin.scss

// Mixin

$font-color: #4a4a4a;
//头部高度
$header-height: 60px;
//底部高度
$footer-height: 1.30666666rem;

//清除浮动
@mixin clearfix() {
&:before,
&:after {
    content: " ";
    display: table;
}
&:after {
    clear: both;
}
}


//水平居中
@mixin center-block() {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

//全屏定位
@mixin fxied-absolute(){
    position:absolute;
    top:0;
    right:0;
}
@mixin fxied-fixed(){
    position:fixed;
    top:0;
    right:0;
}
@mixin fxied-bottom(){
    position:fixed;
    bottom: 0;
    right: 0;
}
//定位上下左右居中
@mixin fxied-center() {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
//定位上下居中
@mixin fxied-top() {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
//左右居中
@mixin fxied-left() {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}


//尺寸助手
@mixin size($width, $height) {
    width: $width;
    height: $height;
}
//正方形
@mixin square($size) {
    @include size($size, $size);
}

//调整大小的文本域
@mixin resizable($direction: both) {
    // Options: horizontal, vertical, both
    resize: $direction;
    // Safari fix
    overflow: auto;
}

//截断文本  元素必须是 block 或 inline-block 级。
@mixin text-overflow() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

//视网膜屏幕（Retina）下的图片
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
    background-image: url($file-1x);

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) {
        background-image: url($file-2x);
        background-size: $width-1x $height-1x;
    }
}

//左右浮动
@mixin f_left(){
    float: left;
}
@mixin f_right(){
    float: right;
}


@mixin scrollBar {
    &::-webkit-scrollbar-track-piece {
        background: #d3dce6;
    }
    &::-webkit-scrollbar {
        width: 6px;
    }
    &::-webkit-scrollbar-thumb {
        background: #99a9bf;
        border-radius: 20px;
    }
}

@mixin relative {
    position: relative;
    width: 100%;
    height: 100%;
}

@mixin pct($pct) {
    width: #{$pct};
    position: relative;
    margin: 0 auto;
}

@mixin triangle($width, $height, $color, $direction) {
    $width: $width/2;
    $color-border-style: $height solid $color;
    $transparent-border-style: $width solid transparent;
    height: 0;
    width: 0;
    @if $direction==up {
        border-bottom: $color-border-style;
        border-left: $transparent-border-style;
        border-right: $transparent-border-style;
    }
    @else if $direction==right {
        border-left: $color-border-style;
        border-top: $transparent-border-style;
        border-bottom: $transparent-border-style;
    }
    @else if $direction==down {
        border-top: $color-border-style;
        border-left: $transparent-border-style;
        border-right: $transparent-border-style;
    }
    @else if $direction==left {
        border-right: $color-border-style;
        border-top: $transparent-border-style;
        border-bottom: $transparent-border-style;
    }
}