公共样式(自己整理scss)

// 弹性盒布局
//命名规则：
// direction--justify-content--align-items
// 排列方式--水平方向--垂直方向
// 例如:rowBetweenCenter
@mixin flex($direction,$justify,$align) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
}
// --水平排列--
// 水平居左，垂直居（上--中--下）
.rowStartStart{
    @include flex(row,flex-start,flex-start);
}
.rowStartCenter{
    @include flex(row,flex-start,center);
}
.rowStartEnd{
    @include flex(row,flex-start,flex-end);
}

// 水平居中，垂直居（上--中--下）
.rowCenterStart{
    @include flex(row,center,flex-start);
}
.rowCenterCenter{
    @include flex(row,center,center);
}
.rowCenterEnd{
    @include flex(row,center,flex-end);
}

// 水平居右，垂直居（上--中--下）
.rowEndStart{
    @include flex(row,flex-end,flex-start);
}
.rowEndCenter{
    @include flex(row,flex-end,center);
}
.rowEndEnd{
    @include flex(row,flex-end,flex-end);
}

// 两端对齐，垂直居（上--中--下）
.rowBetweenStart{
    @include flex(row,space-between,flex-start);
}
.rowBetweenCenter{
    @include flex(row,space-between,center);
}
.rowBetweenEnd{
    @include flex(row,space-between,flex-end);
}

// 两端平均对齐，垂直居（上--中--下）
.rowAroundStart{
    @include flex(row,space-around,flex-start);
}
.rowAroundCenter{
    @include flex(row,space-around,center);
}
.rowAroundEnd{
    @include flex(row,space-around,flex-end);
}

// --垂直排列--
// 垂直居上、水平居（左--中--右）
.columnStartStart{
    @include flex(column,flex-start,flex-start);
}
.columnStartCenter{
    @include flex(column,flex-start,center); 
}
.columnStartEnd{
    @include flex(column,flex-start,flex-end);
}

// 垂直居中、水平居（左--中--右）
.columnCenterStart{
    @include flex(column,center,flex-start);
}
.columnCenterCenter{
    @include flex(column,center,center);
}
.columnCenterEnd{
    @include flex(column,center,flex-end);
}

// 垂直居下、水平居（左--中--右）
.columnEndStart{
    @include flex(column,flex-end,flex-start);
}
.columnEndCenter{
    @include flex(column,flex-end,center);
}
.columnEndEnd{
    @include flex(column,flex-end,flex-end);
}

// 上下两端对齐，水平居（左--中--右）
.columnBetweenStart{
    @include flex(column,space-between,flex-start);
}
.columnBetweenCenter{
    @include flex(column,space-between,center);
}
.columnBetweenEnd{
    @include flex(column,space-between,flex-end);
}

// 上下均匀对齐，水平居（左--中--右）
.columnAroundStart{
    @include flex(column,space-around,flex-start);
}
.columnAroundCenter{
    @include flex(column,space-around,center);
}
.columnAroundEnd{
    @include flex(column,space-around,flex-end);
}

// 定义flex等分
@for $i from 0 through 12 {
    .u-flex-#{$i} {
        flex: $i;
    }
}

// 定义字体20rpx--80rpx大小的字体
@for $i from 20 through 80 {
    .u-font-#{$i} {
        font-size: $i + rpx;
    }
}

// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
    // 得出：u-margin-30或者u-m-30
    .u-margin-#{$i}, .u-m-#{$i} {
        margin: $i + rpx;
    }
    // 得出：u-padding-30或者u-p-30
    .u-padding-#{$i}, .u-p-#{$i} {
        padding: $i + rpx;
    }
    
    @each $short, $long in l left, t top, r right, b bottom {
        // 缩写版，结果如： u-m-l-30
        // 定义外边距
        .u-m-#{$short}-#{$i} {
            margin-#{$long}: $i + rpx;
        }
        // 定义内边距
        .u-p-#{$short}-#{$i} {
            padding-#{$long}: $i + rpx;
        }
        // 完整版，结果如：u-margin-left-30
        // 定义外边距
        .u-margin-#{$long}-#{$i} {
            margin-#{$long}: $i + rpx;
        }
        // 定义内边距
        .u-padding-#{$long}-#{$i} {
            padding-#{$long}: $i + rpx;
        }
    }
}

// 定义行高
@for $i from 20 to 80 {
    .u-lineHeight-#{$i} {
        line-height: $i + rpx;
    }
}

// 定义圆角
@for $i from 0 to 80 {
    .u-radius-#{$i} {
        border-radius: $i + rpx;
    }
}

// 字体颜色
.font-FF{
    color: #FFF;//白色
}
.font-33{
    color: #333;//基本色
}
.font-80{
    color: #808080;
}
.font-9{
    color: #999;//辅助灰色，如加载更多的提示信息
}
.font-c0{
    color: #c0c0c0;
}
//导航栏字体
.navcolor{
    color: #87B8FD;
}
//详情
.xq{
    color: #5B93DD;
}
.ysp{
    color: #43B885;
}
//概况 审批 全选 背景颜色
.commonbg{
    background-color: #87B8FD;
}
.orange{
    background-color: #FC5F5F;
}
.bx{
    background-color: #5B93DD;
}
//尖细
.fontLighter{
    font-weight: lighter;
}
//加粗
.fontBold{
    font-weight: bold;
}

// 定位
.u-rela {
    position: relative;
}
.u-abso {
    position: absolute;
}
//字体位置
.u-text-left {
    text-align: left;
}
.u-text-center {
    text-align: center;
}
.u-text-right {
    text-align: right;
}