scss 常用mixins

mixins.scss

placeholder

@mixin placeholder($font-size: 16px, $color: #eee) {
    ::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        font-size: $font-size;
        color: $color;
    }
}

border-radius

// $direction: top bottom left right

@mixin border-radius($direction, $value: 4px) {
    @if $direction == top or $direction == bottom {
        border-#{$direction}-left-radius: $value;
        border-#{$direction}-right-radius: $value;
    }
    @else {
        border-top-#{$direction}-radius: $value;
        border-bottom-#{$direction}-radius: $value;
    }
}

position-center

@mixin position-center($direction: 'both') {
    position: absolute;
    @if $direction == 'vertical' {
        top: 50%;
        transform: translateY(-50%);
    }
    @else if $direction == 'horizontal' {
        left: 50%;
        transform: translateX(-50%);
    }
    @else {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

ellipsis

@mixin ellipsis($line: 1) {
    overflow: hidden;
    text-overflow: ellipsis;

    @if $line==1 {
        white-space: nowrap;
        word-wrap: normal;
    }

    @else {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $line;
    }
}

border-1px

@mixin border-1px($color: $border-color, $position: 'before') {
    position: relative;
    &::#{$position} {
        content: '';
        pointer-events: none;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: 0 0;
        border: 1px solid $color;
        border-radius: $radius;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        @media (min-resolution: 2dppx) {
            width: 200%;
            height: 200%;
            transform: scale(.5) translateZ(0);
        }
        @media (min-resolution: 3dppx) {
            width: 300%;
            height: 300%;
            transform: scale(.333) translateZ(0);
        }
    }
}

safe-area

// 兼容 ipx 底部安全区域
// $side: top bottom left right

@mixin safe-area($side: bottom) {
   padding-#{$side}: env(safe-area-inset-#{$side});
}

flex

@mixin flex($justify-content: space-between, $align-items: center) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
}

@mixin flex-column($justify-content: space-between, $align-items: center) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-direction: column;
}