css日积月累系列---简易的flex布局使用sass和less 封装版

 本文只是作日积月累的css 样式使用随着实际应用的开发，会越来越大 ，本css只是针对日常用到的。less 语法封装，适用antdesign- UI 后台管理系统开发

.font(@i) when(@i <= 56) {
  .f@{i} {
    font-size: @i + 0px;
  }
  .font((@i + 2));
}
.font(12);

.flexCn(@i) when(@i <= 24) {
  .flex@{i} {
    flex: @i;
  }
  .flexCn((@i + 1));
}
.flexCn(1);


.boxStyle(@i) when(@i <= 80) {
  /****margin*****/
  .mr@{i} {
    margin-right: @i + 0px;
  }
  .ml@{i} {
    margin-left: @i + 0px;
  }
  .mb@{i} {
    margin-bottom: @i + 0px;
  }
  .mt@{i} {
    margin-top: @i + 0px;
  }
  .mr-@{i} {
    margin-right: 0-@i + 0px;
  }
  .ml-@{i} {
    margin-left: 0-@i + 0px;
  }
  .mb-@{i} {
    margin-bottom: 0-@i + 0px;
  }
  .mt-@{i} {
    margin-top: 0-@i + 0px;
  }
  .m@{i}{
    margin-top: @i + 0px;
    margin-left: @i + 0px;
    margin-right: @i + 0px;
    margin-bottom: @i + 0px;
  }

  /**padding**/
  .pad@{i}{
    padding-top: @i + 0px;
    padding-left: @i + 0px;
    padding-right: @i + 0px;
    padding-bottom: @i + 0px;
  }
  .padr@{i} {
    padding-right: @i + 0px;
  }
  .padl@{i} {
    padding-left: @i + 0px;
  }
  .padb@{i} {
    padding-bottom: @i + 0px;
  }
  .padt@{i} {
    padding-top: @i + 0px;
  }
  .padrl-@{i} {
    padding-right: 0-@i + 0px;
    padding-left: 0-@i + 0px;
  }
  .padtb-@{i} {
    padding-bottom: 0-@i + 0px;
    padding-top: 0-@i + 0px;
  }
 
  .radius@{i}{
    border-radius: @i+0px;
  }
  .ant-image.radius@{i}{
    img{
      border-radius: @i+0px
    }
  }

  .radius-b@{i}{
    border-radius: 0px 0px @i+0px @i+0px;
  }
  .radius-t@{i}{
    border-radius:@i+0px @i+0px 0px 0px ;
  }
  .radius-bt@{i}{
    border-radius:@i+0px 0px @i+0px 0px ;
  }
  .radius-rl@{i}{
    border-radius:0px @i+0px 0px @i+0px ;
  }
  
  .boxStyle((@i + 1));
}
.boxStyle(0);


.titleText {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #262626;
  line-height: 56px;
}
.over-hidden{
  overflow: hidden;
}
.over-y{
  overflow: hidden;
  &&:hover{
    overflow-y: auto;
  }

 
}
.over-x{
  overflow: hidden;
  &&:hover{
    overflow-x: auto;
  }
}

/*************************css 基础属性样式*************************/

.pr {
  position: relative;
}
.pf {
  position:fixed;
}
.pa {
  position: absolute;
}
.p-sticky{
  position: sticky;
}
.pointer {
  cursor: pointer;
}
/*****flex 布局相关******/
.flex-box {
  display: flex;
}
.flex-wrap{
  flex-wrap:wrap
}
.middle {
  justify-content: center;
  align-items: center;
}
.middle-a {
  align-items: center;
}
.middle-j {
  justify-content: center;
}
.flex-end-a{
  align-items: end;
}
.flex-end{
  justify-content: flex-end;
}
.flex-column {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-between {
  justify-content: space-between;
}


/***** display 布局相关******/
.flow-box{
  display: flow-root;
}

.inblock-box {
  display: inline-block;
}
.none-box {
  display: none;
}
.block-box {
  display: block;
}

.full {
  width: 100%;
  height: 100%;
}
.full-w {
  width: 100%;
}
.full-h {
  height: 100%;
  //height:calc(100% - 0px)
}

.text-link{
  color: @btn-default-color;
}
.text-white{
  color: #fff;
}
.text-waring{
  color:#FF4757
}
.text-waring1{
  color:#ff4d4f
}

.text-title{
  color: #262626;
}
.text-sub{
  color: #595959;
}
.text-sub1{
  color: #8C8C8C;
}
.text-success{
  color: #5BE873;
}
.text-bold{
  font-weight: bold;
}
.text-nowrap{
  white-space: nowrap;
}
.text-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis2{
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
display: -webkit-box;
-webkit-line-clamp: 2; // 超出多少行
-webkit-box-orient: vertical;
}
.text-ellipsis3{
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  display: -webkit-box;
  -webkit-line-clamp: 3; // 超出多少行
  -webkit-box-orient: vertical;
}
.text-ellipsis4{
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  display: -webkit-box;
  -webkit-line-clamp: 4; // 超出多少行
  -webkit-box-orient: vertical;
}

.bg-tip{
  background-color: #F0F7FF;
}
.bg-white{
  background-color: #fff;
}
.bg-panel{
  background-color: #F7F8FA;
}
.bg-lab{
  background-color:#F0F0F0;;
}
.bg-info{
  background-color: #F5F7FA;
}
.bg-info1{
  background-color: #F67C02;
}
.bg-primary{
  background-color: #6AAEFF;
}
.bg-success{
  background-color: #6BD461;
}
.bg-waring{
  background-color: #FF4757;
}
.bg-tip2{
  background-color: #E5E6EB; 
}
.border1{
 border: 1px solid #E1E8F0;
}
.borderb-1{
  border-bottom: 1px solid #E1E8F0;
 }
 .bordert-1{
  border-top: 1px solid #E1E8F0;
 }
.box-sh{
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.alignL{
  text-align: left;
}
.alignR{
  text-align: right;
}
.alignC{
  text-align: center;
}

.ant-modal-header, .ant-modal-content {
  border-radius: 8px;
}


.submitButtonDiv{
background-color: #fff;
box-shadow: -2px -2px 4px 0px rgba(0, 0, 0, 0.05);
height: 60px;
width:calc(~'100% + 48px');  
}

.ant-modal-zdy{
  .ant-modal-header{
    border-radius: 8px 8px 0 0;
  }
  .ant-modal-content{
    border-radius: 8px
  }
}



.radio-group-zdy{
  .ant-radio-button-wrapper:first-child {
    border-radius: 4px 0 0 4px;
  }
  .ant-radio-button-wrapper:last-child {
    border-radius: 0 4px 4px 0;
  }
}

sass.css flex-box 库 所有元素都*2 主要应用 taro 和移动端开发，设计稿件针对375 做的处理，内部PX和Px 写法是正确的主要针对taro 的兼容处理

@for $i from 1 through 28 {
  .f#{2 * $i + 8} {
    font-size: 2 * $i + 8 + PX;
  }
}
@for $i from 1 through 24 {
  .flex#{$i} {
    flex: $i;
  }
}
@for $i from 1 through 24 {
  .flex#{$i} {
    flex: $i;
  }
}

@for $i from 1 through 80 {
  .index#{$i} {
    z-index: $i * 2 + 0px;
  }
  /****margin*****/
  .mr#{$i} {
    margin-right: $i * 2 + 0px;
  }
  .ml#{$i} {
    margin-left: $i * 2 + 0px;
  }
  .mb#{$i} {
    margin-bottom: $i * 2+ 0px;
  }
  .mt#{$i} {
    margin-top: $i * 2 + 0px;
  }
  .mr-#{$i} {
    margin-right: 0- $i * 2 + 0px;
  }
  .ml-#{$i} {
    margin-left: 0- $i * 2 + 0px;
  }
  .mb-#{$i} {
    margin-bottom: 0- $i * 2 + 0px;
  }
  .mt-#{$i} {
    margin-top: 0- $i * 2+ 0px;
  }
  .m#{$i} {
    margin-top: $i * 2 + 0px;
    margin-left: $i * 2+ 0px;
    margin-right: $i * 2 + 0px;
    margin-bottom: $i * 2 + 0px;
  }

  /**padding**/
  .pad#{$i} {
    padding-top: $i * 2+ 0px;
    padding-left: $i * 2 + 0px;
    padding-right: $i * 2 + 0px;
    padding-bottom: $i * 2+ 0px;
  }
  .padr#{$i} {
    padding-right: $i * 2 + 0px;
  }
  .padl#{$i} {
    padding-left: $i * 2 + 0px;
  }
  .padb#{$i} {
    padding-bottom: $i * 2 + 0px;
  }
  .padt#{$i} {
    padding-top: $i * 2 + 0px;
  }

  .radius#{$i} {
    border-radius: $i * 2 +0px;
  }
  .radius-b#{$i} {
    border-radius: 0px 0px $i * 2+0px $i * 2+0px;
  }
  .radius-t#{$i} {
    border-radius: $i * 2+0px $i * 2+0px 0px 0px;
  }
  .radius-bt#{$i} {
    border-radius: $i * 2+0px 0px $i * 2+0px 0px;
  }
  .radius-rl#{$i} {
    border-radius: 0px $i * 2+0px 0px $i * 2+0px;
  }
}

.titleText {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #262626;
  line-height: 56px;
}
.over-hidden {
  overflow: hidden;
}
.over-y {
  overflow-y: auto;
}
.over-x {
  overflow-x: auto;
}

/*************************css 基础属性样式*************************/

.pr {
  position: relative;
}
.pf {
  position: fixed;
}
.pa {
  position: absolute;
}
.pointer {
  cursor: pointer;
}

/*****flex 布局相关******/
.flex-box {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.middle {
  justify-content: center;
  align-items: center;
}
.middle-a {
  align-items: center;
}
.middle-j {
  justify-content: center;
}
.flex-end-a {
  align-items: end;
}
.flex-end {
  justify-content: flex-end;
}
.flex-column {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-between {
  justify-content: space-between;
}

/***** display 布局相关******/
.flow-box {
  display: flow-root;
}

.inblock-box {
  display: inline-block;
}
.block-box {
  display: block;
}

.full {
  width: 100%;
  height: 100%;
}
.full-w {
  width: 100%;
}
.full-h {
  height: 100%;
  //height:calc(100% - 0px)
}
.text-nowrap {
  white-space: nowrap;
}
.text-link {
  color: #6aaeff;
}
.text-white {
  color: #fff;
}
.text-waring {
  color: #ff4757;
}
.text-title {
  color: #262626;
}
.text-sub {
  color: #595959;
}
.text-sub1 {
  color: #8c8c8c;
}
.text-success {
  color: #5be873;
}
.text-bold {
  font-weight: bold;
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis2 {
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  display: -webkit-box;
  -webkit-line-clamp: 2; // 超出多少行
  -webkit-box-orient: vertical;
}
.text-ellipsis3 {
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  display: -webkit-box;
  -webkit-line-clamp: 3; // 超出多少行
  -webkit-box-orient: vertical;
}
.text-ellipsis4 {
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  display: -webkit-box;
  -webkit-line-clamp: 4; // 超出多少行
  -webkit-box-orient: vertical;
}
.bg-body {
  background-color: #f3f6fa;
}
.bg-tip {
  background-color: #f0f7ff;
}
.bg-white {
  background-color: #fff;
}
.bg-panel {
  background-color: #f7f8fa;
}
.bg-lab {
  background-color: #f0f0f0;
}
.bg-info {
  background-color: #f5f7fa;
}
.bg-info1 {
  background-color: #f67c02;
}

.bg-primary {
  background-color: #0678ff;
}
.bg-success {
  background-color: #6bd461;
}
.bg-waring {
  background-color: #ff4757;
}
.bg-dark{
  background-color: rgba(0, 0, 0, 0.5);
}
.bg-border{
  background-color: #E1E8F0; 
}
.bg-tip2 {
  background-color: #e5e6eb;
}
.border1 {
  border: 1px solid #e1e8f0;
}
.borderb-1 {
  border-bottom: 1px solid #e1e8f0;
}
.box-sh {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.alignL {
  text-align: left;
}
.alignR {
  text-align: right;
}
.alignC {
  text-align: center;
}


taro-button-core,
button {
  &.zdy[type="primary"] {
    background-color: #0678ff;
  }
  &.zdy[size=mini]{
    line-height: 2.3;
    font-size: 13Px;
    width: 100%;
  }
}

.full-h-mi{
  min-height: 100%;
}