scss全局变量设置

写过SCSS的，都知道它的变量、嵌套、混合、继承等特性，带给前端人员的快速编写和方便维护，让人一旦恋上，就舍不得放手。
 

$orange: #ee5313!default;  //主题色：橙色
$darkOrange:#d43a11;  //深橙色
$color:#333;
$gray: #999;         //灰色
$lightGray:#bbb;     //浅灰
$grayBg:#f3f3f3!important;    //body灰色背景
$white:#fff;         //白色
$blue:#1aacdc;       //蓝色
$red:#e5171a;       //红色
$distance:0.75rem; //边距
$distance_s:0.6rem;
$line:#e0e0e0; //线条颜色
$lightLine:#eee; //浅线条颜色

$baseTextColor:#303030;
$secondTextColor:#646464;

$coverLayer:98;
$modal-zIndex:$coverLayer+1;

/*像素转换相对单位rem*/
@function px2rem($px) {
    @return $px / $baseFontSize * 1rem;
}

/*表单行*/
@mixin form_li{
    position:relative;
    width:100%;
    border-bottom:#e0e0e0 px2rem(1px) solid;
}

/*表单输入框*/
@mixin form_input{
    height:3.6rem;
    outline:0;
    &::-webkit-input-placeholder {
        color:#8f8f8f;
    }
}
/*多行省略*/
@mixin multi-line-ellipsis($lineLimit, $lineHeight: 1.2, $fixedHeight: false) {
    line-height: $lineHeight;
    @if ($fixedHeight) {
        height: $lineLimit * $lineHeight * 1em;
    } @else {
        max-height: $lineLimit * $lineHeight * 1em;
    }
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-line-clamp: $lineLimit;
    -webkit-box-orient: vertical;
}
/*单行省略*/
@mixin single-line-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.2;
}

@mixin flex-box {
    display: flex;

    > * {
        display: block; //这玩意是因为早期的flexbox实现要求容器内的项目必须是display:block，android 4.3就是这样。
    }
}


/*图片水平垂直居中*/
@mixin image-container {
    @include flex-box;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: bottom;
    }
}
/*块元素百分比下居中*/
@mixin position-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*子元素水平平均地分布，垂直居中*/
@mixin container-center {
    @include flex-box;
    justify-content: space-around;
    align-items: center;
}

/*主体距离头部和尾*/
@mixin body-up-bom{
    width:100%;
    height:auto;
    padding: 4.16rem 0 5rem;
}
/*外层盒子距头尾*/
.bodyWrap{
    @include body-up-bom;
}

/*外层盒子*/
@mixin containers{
    width:100%;
    background: $white;
}