uniapp使用scss定义全局css

1.新建scss文件，定义各种全局css样式

 
$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;
}
 
 

来源：(21条消息) scss全局变量设置_scss定义height变量_糖果果sugar的博客-CSDN博客

2.如果只需要局部进入，只需要在.vue文件中写如下代码（注意，必须要学lang="scss"）

使用

 3.全局引入的方法

在uni.scss文件中引入variable.scss，即在uni.scss文件中添加以下代码：

// 引入公共scss变量文件
@import './static/css/variable.scss';

引入后，才能在所有页面的style中使用自定义的scss变量，要注意的是，使用变量的页面style中要添加 lang="scss"。

来源：(21条消息) uniapp 添加scss全局变量、scss公共类_uniapp scss_今天超市大减价的博客-CSDN博客

(21条消息) uni-app全局引入scss文件的不同方式_uniapp 引入scss_MINO吖的博客-CSDN博客