【scss】scss公有样式生成

/* 生成的1-300的所有内外边距 */
$i: 0;
@while $i < 300 {
  .ml-#{$i} { margin-left: #{$i}rpx !important; }
  .mr-#{$i} { margin-right: #{$i}rpx !important; }
  .mt-#{$i} { margin-top: #{$i}rpx !important; }
  .mb-#{$i} { margin-bottom: #{$i}rpx !important; }
  .mx-#{$i} { margin: 0 #{$i}rpx; }
  .my-#{$i} { margin: #{$i}rpx 0; }
  .m-#{$i} {
	  margin-left: #{$i}rpx;
	  margin-right: #{$i}rpx;
	  margin-top: #{$i}rpx;
	  margin-bottom: #{$i}rpx;
  }
  .m-0-auto {
	   margin: 0 auto;
  }

  .pl-#{$i} { padding-left: #{$i}rpx !important; }
  .pr-#{$i} { padding-right: #{$i}rpx !important; }
  .pt-#{$i} { padding-top: #{$i}rpx !important; }
  .pb-#{$i} { padding-bottom: #{$i}rpx !important; }
  .px-#{$i} {
	  padding-left: #{$i}rpx;
	  padding-right: #{$i}rpx;
  }
  .py-#{$i} {
	  padding-top: #{$i}rpx;
	  padding-bottom: #{$i}rpx;
  }
  .p-#{$i} {
	  padding-left: #{$i}rpx;
	  padding-right: #{$i}rpx;
	  padding-top: #{$i}rpx;
	  padding-bottom: #{$i}rpx;
  }

  .rounded-#{$i} { border-radius: #{$i}rpx; }
  .br-#{$i} { border-radius: #{$i}rpx; }

  	.w-#{$i} { width: #{$i}rpx; }
	.min-w-#{$i} { min-width: #{$i}rpx; }
  	.h-#{$i} { height: #{$i}rpx !important; }
	.min-h-#{$i} { min-height: #{$i}rpx; }
  	.lh-#{$i} { line-height: #{$i}rpx !important; }
  	.fs-#{$i} {
      font-size: #{$i}rpx !important;
      .uni-input-input{
        font-size: #{$i}rpx;
      }
    }

  	.gap-#{$i} { gap: #{$i}rpx #{$i}rpx; }

	$i: $i+2;
}

.max-content{ //最大内容宽度
  width:max-content;
}

// grid布局
.grid { display: grid; }
@for $i from 1 through 12 {
  .grid-col-#{$i} { grid-template-columns: repeat($i, 1fr); }
  .grid-row-#{$i} { grid-template-rows: repeat($i, 1fr); }
  .gap-#{$i * 2} { gap: #{$i * 2}rpx #{$i * 2}rpx; }
  .gap-row-#{$i * 2} { grid-row-gap: #{$i * 2}rpx; }
  .gap-col-#{$i * 2} { grid-column-gap: #{$i * 2}rpx; }
}


// 白色背景
.bg-white { background-color: #fff; }
// 黑色背景
.bg-black { background-color: #000; }
// 0.1的蓝色背景
.bg-blue01 { background-color: rgba(23,71,236,0.1) !important; }
// 白色文字
.text-white { color: #fff !important; }
// 黑色文字
.text-black { color: #000; }
// 红色文字
.text-red {color:#f00;}
// 蓝色文字
.text-blue {color:#1747EC !important;}
// 灰色文字
.text-grey {color:#8695AC;}
// 文本左中右对齐
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
// 单行文本溢出隐藏
.text-ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

// 字体加粗
.fw-400{font-weight: 400 !important;}
.fw-500{font-weight: 500 !important;}
.fw-600{font-weight: 600 !important;}

// 宽度100%
.w-100vw { width: 100vw; }
// 定位
.absolute { position: absolute; }
.relative { position: relative; }

// 背景不重复
.no-repeat{
  background-repeat: no-repeat;
}
// 背景大小1
.bgs-cover{
  background-size: cover;
}
// 背景大小100%
.bgs-100{
  background-size: 100% 100%;
}
// 背景居中
.bg-center{
  background-position: center center;
}

// flex布局
.flex { display: flex !important;}
.flex-column { flex-direction: column;}
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-center {
  align-items: center !important;
  justify-content: center !important;
}
.flex-between {
  align-items: center !important;
  justify-content: space-between !important;
}
.flex-around {
  align-items: center !important;
  justify-content: space-around !important;
}
.flex-end { align-items: flex-end; }
.flex-start { align-items: flex-start; }
.flex-align-center { align-items: center !important; }
.flex-top { align-items: flex-start; }
.flex-bottom { align-items: flex-end; }
.flex-left { justify-content: flex-start; }
.flex-right { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.bottom-button {
	  position: fixed;
	  bottom: 0;
	  width: 100%;
}

.items-center {     align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-end { justify-content: flex-end; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }
.flex-half {flex: 0 0 50%}


.text-222{color:#222;}
.text-333{color:#333;}
.text-999{color:#999;}
.text-b6b{color: #B6B6B6;}
.text-orange{color: #FF5F00;}
.text-7e7{color: #7E7E7E;}
.text-b6b{color: #B6B6B6;}
.text-006{color: #0065FF;}

.bg-f5f{background-color: #F5F5F5;}
.bg-fff{background-color: #FFFFFF;}
.bg-f7f{background-color: #F7F7F7;}
.bg-ece{background-color: #ECECEC;}
.bg-b6b{background-color: #B6B6B6;}
.bg-f3f{background-color: #F3F7FD;}

.border-white{border: 0.5px solid #fff;}
.border-primary{border: 0.5px solid #0065ff;}
.border-bottom-e5e{border-bottom: 1rpx solid #E5E5E5;}
.border-dashed-e5e{border: 1rpx dashed #E5E5E5;}
.border-transparent{border: 1rpx solid transparent;}

.clearfix:after{
    clear: both;
    content: "";
    display: table
}
.fl {
    float: left;
}
.fr {
    float: right;
}