Scss笔记

// 文字省略
@mixin text-line( $num : false) {
    overflow: hidden;
    text-overflow: ellipsis;
    @if $num {
        display: -webkit-box;
        -webkit-line-clamp: $num;
        -webkit-box-orient: vertical;
    } @else {
        white-space: nowrap;
    }
}

// 清除浮动
@mixin clea-fix {
    &:after {
        height: 0;
        clear: both;
        visibility: hidden;
    }
    &:after, &:before {
        content: " ";
        display: table;
    }
}
// flex-box 布局
@mixin flex-box {
    display: -webkit-box;
    display: -moz-box;
    //display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}
@mixin flex($num : 1) {
    flex: $num;
    -webkit-flex: $num;
    box-flex: $num;
    -webkit-box-flex: $num;
}
//垂直居中
@mixin align-center {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    box-flex: center;
    align-items: center;
}
//水平居中
@mixin pack-center {
    -webkit-justify-content: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
//两端对齐
@mixin pack-justify {
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
}

/*
// 0.5px边框细线
$type: all(四边框)；t(上边框)；r(右边框)；b(下边框)；l(左边框)
$color: (边框颜色)
$width: (边框宽度)
*/
@mixin bd-pt($type: all, $color: #DDD, $width : 1) {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    @if $type == all {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border: $width * 1px solid $color;
    } @else if $type == t {
        left: 0;
        right: 0;
        top: 0;
        height: $width * 1px;
        background: $color;
    } @else if $type == r {
        top: 0;
        bottom: 0;
        right: 0;
        width: $width * 1px;
        background: $color;
    } @else if $type == b {
        left: 0;
        right: 0;
        bottom: 0;
        height: $width* 1px;
        background: $color;
    } @else if $type == l {
        top: 0;
        bottom: 0;
        left: 0;
        width: $width * 1px;
        background: $color;
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        @if $type == all {
            right: -100%;
            bottom: -100%;
            @include prefix-property(transform, scale(0.5));
            @include prefix-property(transform-origin, 0% 0%);
        } @else if $type == t {
            @include prefix-property(transform, scaleY(0.5));
            @include prefix-property(transform-origin, 50% 0%);
        } @else if $type == r {
            @include prefix-property(transform, scaleX(0.5));
            @include prefix-property(transform-origin, 100% 50%);
        } @else if $type == b {
            @include prefix-property(transform, scaleY(0.5));
            @include prefix-property(transform-origin, 50% 100%);
        } @else if $type == l {
            @include prefix-property(transform, scaleX(0.5));
            @include prefix-property(transform-origin, 100% 50%);
        }
    }
}

// 三角形箭头
@mixin arrow($color: #CCC, $border-width: 5px, $arrow: up) {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    @if ($arrow == up) {
        border-left: $border-width solid transparent;
        border-right: $border-width solid transparent;
        border-bottom: $border-width*1.5 solid $color;
    } @else if ($arrow == down) {
        border-left: $border-width solid transparent;
        border-right: $border-width solid transparent;
        border-top: $border-width*1.5 solid $color;
    } @else if ($arrow == left) {
        border-top: $border-width solid transparent;
        border-bottom: $border-width solid transparent;
        border-right: $border-width*1.5 solid $color;
    } @else if ($arrow == right) {
        border-top: $border-width solid transparent;
        border-bottom: $border-width solid transparent;
        border-left: $border-width*1.5 solid $color;
    }

}