封装项目中常用的样式片段

☼ 注：笔者是一名卑微的小前端，文章是根据自己当前项目做的笔记，具体应用请参照自己实际项目情况

1、清除浮动

@mixin clearfix() {
    &::before, &::after {
        content: '';
        display: table;
    }
    &::after {
        clear: both;
        overflow: hidden;
    }
}

2、水平居中

@mixin posX() {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

3、垂直居中

@mixin posY($offset: 0, $left: true) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    @if $left {
        left: $offset;
        right: auto;
    } @else {
        left: auto;
        right: $offset;
    }
}

4、垂直水平居中

@mixin posCenter() {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

5、箭头

@mixin arrow($dir: right, $width: 30px, $border: 2px, $poa: $width/2, $color: #ccc ) {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: $width;
        height: $width;
        display: block;
        border-top: $border solid $color;
        border-right: $border solid $color;
        margin-top: $poa * -1;
        @if $dir == bottom {
            right: 0;
            transform: rotate(135deg);
        }  @else if $dir == top {
            right: 0;
            transform: rotate(-45deg);
        } @else if $dir == left {
            left: 0;
            transform: rotate(-135deg);
        } @else {
            right: 0;
            transform: rotate(45deg);
        }
    }
}

6、等腰三角形

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

7、1px 边框

@mixin border1px($dir: bottom, $color: #e5e5e5) {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        background: $color;
        @if $dir == top {
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            transform: scaleY(.5);
        } @else if $dir == left {
            left: 0;
            top: 0;
            width: 1px;
            height: 100%;
            transform: scaleX(.5);
        } @else if $dir == right {
            right: 0;
            top: 0;
            width: 1px;
            height: 100%;
            transform: scaleX(.5)
        } @else {
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            transform: scaleY(.5)
        }
    }
}

8、单行溢出...

@mixin lineEllipsis($maxWidth: 100px) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: $maxWidth;
}

9、多行溢出...

@mixin multLineEllipsis($line: 2) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}

10、清楚按钮的默认样式

@mixin btnNormal() {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: none;
    padding: 0;
    &::after {
        display: none;
    }
}

11、锁定图片的尺寸

@mixin fixImageSize() {
    max-width: 100%;
    max-height: 100%;
}

12、取消鼠标双击选中文字

@mixin cancelUserSelect() {
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
}

13、超出部分滚动并隐藏滚动条

@mixin hideScrollBar($height: 100px, $maxheight: 'height') {
    @if $maxheight == 'max' {
        max-height: $height;
    } @else {
        height: $height;
    }
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }
}

14、超出部分滚动并自定义滚动条样式

@mixin customScrollBar($height: 100px, $maxheight: 'height', $barWidth: 5px, $color: rgba(255, 255, 255, 0.2)) {
    @if $maxheight == 'max' {
        max-height: $height;
    } @else {
        height: $height;
    }
    overflow-y: auto;
    overflow-x: hidden;
    // 火狐
    -ms-overflow-style: none;
    scrollbar-width: thin;
    scrollbar-color: $color #2b303e;

    &::-webkit-scrollbar {
        width: $barWidth;
    }

    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 8px;
        box-shadow: inset 0 0 5px $color;
        background: $color;
    }
}

15、页面左边固定树，右边展示内容的布局

@mixin treeContainer() {
    width: 100%;
    display: flex;
    justify-content: center;
}

@mixin treeLeft($hideBar: false, $min: false) {
    overflow: auto;
    margin-left: 30px;
    padding-top: 20px;
    text-align: left;
    border-right: 1px dotted gray;
    height: calc(100vh - 180px);
    @if $min {
        min-width: $min;
    } @else {
        width: 300px;
    }
    @if $hideBar {
        -ms-overflow-style: none;
        scrollbar-width: none;
        &::-webkit-scrollbar {
            display: none;
        }
    }
    ul, li, i, span{
        font-size: 16Px;
        @media screen and (max-width: 1400px) {
            font-size: 15Px;
        }
    }
    :global {
        .ant-tree {
            max-height: 600px;
            li {
                .ant-tree-node-content-wrapper.ant-tree-node-selected {
                    background-color: #fff;
                    color: #0084FF;
                }
            }
        }
    }
}

@mixin treeRight() {
    background-color: #ffffff;
    flex: 1;
    height: calc(100vh - 180px);
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
}