mixin（公共样式定义）

minxin公用样式

src/scss/_mixin.scss

//宽高
@mixin wh($width, $height) {
    width: $width;
    height: $height;
    display: block;
}

//超出一行变成...
@mixin ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

//超出$Line行变成...
@mixin ellipsisLn($Line) {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $Line;
}
/* 清除浮动 */

@mixin clearfix {
    &:after {
        clear: both;
        content: '.';
        display: block;
        height: 0;
        line-height: 0;
        overflow: hidden;
    }
    *height: 1%;
}
/* 画三角形 */

@mixin triangle($width:10px, $direction:top, $color:$bgBlueLight) {
    border: $width solid transparent;
    @if ($direction==top) {
        // 上三角
        border-bottom-color: $color;
    }
    @if ($direction==bottom) {
        // 下三角
        border-top-color: $color;
    }
    @if ($direction==left) {
        // 左三角
        border-right-color: $color;
    }
    @if ($direction==right) {
        // 右三角
        border-left-color: $color;
    }
}

//弹性盒
@mixin flex($direction:row) {
    display: flex;
    flex-direction: $direction;
    align-items: center;
    justify-content: center;
}

@mixin nextStep($bcolor:#C0C0C0, $fcolor:#fff, $w:6.96rem) {
    display: block;
    width: $w;
    height: 0.7rem;
    line-height: 0.7rem;
    text-align: center;
    margin: 0.27rem auto 0;
    color: $fcolor;
    border-radius: 0.35rem;
    letter-spacing: 1px;
    font-size: 0.3rem;
}

@mixin border1px($direction: 'bottom') {
    position: relative;
    @if $direction==top {
        &::after {
            content: '';
            @include wh(200%, 1px);
            transform-origin: left top;
            transform: scale(0.5);
            background: $border-color-base;
            position: absolute;
            top: 0px;
            left: 0;
        }
    }
    @else if $direction==bottom {
        &::after {
            content: '';
            @include wh(200%, 1px);
            transform-origin: left top;
            transform: scale(0.5);
            background: #ccc;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    }
}

@mixin arrow($direction, $size, $color) {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    border-width: $size;
    cursor: pointer;
    @if $direction==top {
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent $color transparent;
        border-top: none;
    }
    @else if $direction==bottom {
        border-style: solid dashed dashed dashed;
        border-color: $color transparent transparent transparent;
        border-bottom: none;
    }
    @else if $direction==right {
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent $color;
        border-right: none;
    }
    @else if $direction==left {
        border-style: dashed solid dashed dashed;
        border-color: transparent $color transparent transparent;
        border-left: none;
    }
}

@mixin bg-image($url) {
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url($url + "@3x.png");
    }
}

// 扩展点击区域(多用于移动端)
@mixin extend-click() {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
    }
}

@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

// 美化占位符 placeholder 样式
@mixin beauty-placeholder($fz, $color: #999, $align: left) {
    &:-moz-placeholder {
        font-size: $fz;
        color: $color;
        text-align: $align;
    }
    &:-ms-input-placeholder {
        font-size: $fz;
        color: $color;
        text-align: $align;
    }
    &::-webkit-input-placeholder {
        font-size: $fz;
        color: $color;
        text-align: $align;
    }
}

// 毛玻璃效果
@mixin Mao($blur: 10px,$bg:#a89e40) {
   position: relative;
   z-index: 1;
   overflow: hidden;
   &::after{
        content: '';
        background: $bg;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index:-1;
        -webkit-filter: blur($blur);
        -moz-filter: blur($blur);
        -o-filter: blur($blur);
        -ms-filter: blur($blur);
        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='${blur}');
        filter: blur($blur);
        *zoom: 1;
   }
}

// 滤镜: 将彩色照片显示为黑白照片、保留图片层次
@mixin grayscale() {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

// flex
@mixin flex ($direction: row, $justify-content: flex-start, $align-items: flex-start, $flex-wrap: nowrap) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-wrap: $flex-wrap;
}

在组件中使用：

//引入
@import './scss/_mixin.scss';

//使用
html,body{
  @include wh(100%, 100%);
}

variable（变量）

src/scss/_variable.scss

$base-color:#FF483C;
//渐变色
$base-background-color:linear-gradient(314deg, rgba(255, 101, 96, 1) 0%, rgba(255, 106, 67, 1) 100%);
//文字颜色
$base-title-color:black;
//普通文字颜色
$base-normal-color:grey;
//文字大小
$base-size-xxxl:64px;
$base-size-xxl:44px;
$base-size-xl:36px;
$base-size-l:32px;
$base-size-m:28px;
$base-size-s:24px;

在组件中使用

//引入
@import './scss/_variable.scss';


//使用
body{
  @include grayscale();
  background: $base-background-color;
}