分享一段scss的common代码，令人崩溃的Style和CSS命名

最近项目组新进来一些小伙伴，写的css的代码着实有点。。。

样式诸如这样：

<svg-icon icon-class="file_white" style="width:16px;height:16px;"/>

这样：

<a-select
    v-model="designFormula"
    style="width: 250px"
    placeholder="请选择计算公式"
>

还有相同css多次定义的：

.container-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.mt10{
  margin-top: 10px;
}

.mt-10px{
  margin-top: 10px;
}

基于此，为保持代码整洁性，结合常用样式，封装了一个common.scss文件，以供团队使用（后续会不断迭代）

@charset 'utf-8';

.w-percent{
    width: 100%;
}
.w-half{
    width: 50%;
}
.w-trisector{
    width: 33.3%;
}
.text-center{
    text-align: center;
}
.border{
    border: 1px solid #eee;
}
.radius{
    border-radius: 6px;
}
.color-fff{
    color: #fff;
}
.border-box {
    box-sizing: border-box;
}
.over-auto{
    overflow: auto;
}
.over-hidden{
    overflow: hidden;
}

// 定义常用margin、padding、font-size大小
@for $i from 0 through 50 {
    // 值仅支持被2或5整除
    @if $i % 2 == 0 or $i % 5 == 0 {
        // margin简写
       .margin-#{$i}, .m-#{$i}{
           margin: $i + px;
       }
       // padding简写
       .padding-#{$i}, .p-#{$i}{
           padding: $i + px;
       }
       // font-size值
       .font-#{$i}{
           font-size: $i + px;
       }
    }
    //单独设置某个方向的margin和padding值
    @each $logogram, $fullName in (l,left) (r,right) (t,top) (b,bottom) {
        // 设置margin距离各个方向的值
        .margin-#{$fullName}-#{$i}, .m-#{$logogram}-#{$i}{
            margin-#{$fullName}: $i + px
        }
        // 设置padding距离各个方向的值
        .padding-#{$fullName}-#{$i}, .p-#{$logogram}-#{$i}{
            padding-#{$fullName}: $i + px ;
        }
    }
}
// 定义常用宽高
@for $i from 10 through 600{
    // 值仅支持被10整除
    @if $i % 10 == 0{
        .width-#{$i}, .w-#{$i}{
            width: $i + px;
        }
        .height-#{$i}, .h-#{$i}{
            height: $i + px;
        }
    }
}
// 超出行数，自动显示行尾省略号，最多5行
@for $i from 1 through 5{
    line-#{$i}{
        @if $i == 1 {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		} @else {
			display: -webkit-box!important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical!important;
		}
    }
}
// flex相关
@mixin flex($direction:row){
    display: flex;
    flex-direction: $direction;
}
// 主轴水平方向
.flex,.flex-x,.flex-row{
    @include flex
}
// 主轴垂直方向
.flex-y,.flex-column{
    @include flex('column')
}
// 主轴水平方向，起点在右侧
.flex-x-reverse,.flex-row-reverse{
    @include flex('row-reverse')
}
// 主轴垂直方向，起点在下侧
.flex-y-reverse,.flex-column-reverse{
    @include flex('column-reverse')
}
// 水平垂直居中
.flex-center{
    @include flex;
    justify-content:center;
    align-items:center;
}
// 主轴居中
.flex-x-center{
    @include flex;
    justify-content: center;
}
// 主轴等比间距,交叉轴居中
.flex-between-center{
    @include flex;
    justify-content: space-between;
    align-items: center;
}
// 主轴均分间距,交叉轴居中
.flex-around-center{
    @include flex;
    justify-content: space-around;
    align-items: center;
}
// 主轴起点对齐
.flex-x-start{
    @include flex;
    justify-content: flex-start
}
// 主轴终点对齐
.flex-x-end{
    @include flex;
    justify-content: flex-end
}
// 交叉轴居中
.flex-y-center{
    @include flex;
    align-items:center
}
// 交叉轴起点对齐
.flex-y-start{
    @include flex;
    align-items: flex-start;
}
// 交叉轴终点对齐
.flex-y-end{
    @include flex;
    align-items: flex-end;
}
// 交叉轴第一行文字基线对齐
.flex-y-baseline{
    @include flex;
    align-items: baseline;
}
// 交叉轴拉伸对齐
.flex-y-stretch{
    @include flex;
    align-items: stretch;
}
// 自动伸缩
.flex-fill{
    @include flex;
    flex:auto
}
// 换行
.flex-warp{
    @include flex;
    flex-wrap: wrap;
}