less

// 父级设置flex
.flex {
	display: flex
}

// 主轴排列方向，X轴和Y轴
.flex-x {
	flex-direction: row
}

.flex-y {
	flex-direction: column
}

/*
确认主轴情况下的对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
*/
.flex-x-start {
	justify-content: flex-start
}

.flex-x-center {
	justify-content: center
}

.flex-x-end {
	justify-content: flex-end
}

.flex-x-between {
	justify-content: space-between
}

.flex-x-around {
	justify-content: space-around
}

.flex-x-evenly {
	justify-content: space-evenly
}

/*
设置交叉轴上对齐方式，且在只有一根轴线情况下，即不设置换行
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
*/
.flex-y-start {
	align-items: flex-start
}

.flex-y-center {
	align-items: center
}

.flex-y-end {
	align-items: flex-end
}

// 换行
.flex-wrap {
	flex-wrap: wrap;
}

// 子元素
.self-start {
	align-self: flex-start;
}

.self-center {
	align-self: flex-center;
}

.self-end {
	align-self: flex-end;
}

.flex-1 {
	flex: 1 1 0%;
}

.rounded {
	border-radius: 100%;
}

// 百分比和vw vh 字号
// .vw(100);
// .vw(@n, @i: 1) when (@i <= @n) {
//   .w-@{i} {
//       width: (@i * 1%);
//   }
//   .h-@{i} {
//     height: (@i * 1%);
//   }
//   .w-@{i}vw {
//     width: (@i * 1%);
//   }
//   .h-@{i}vh {
//     height: (@i * 1%);
//   }
//   .leading-@{i}px {
//     line-height: (@i * 1px);
//   }
//   .text-@{i}px {
//     font-size: (@i * 1px);
//   }
//   .rounded-@{i}px {
//     border-radius: (@i * 1px);
//   }
//   .vw(@n, (@i + 1));
// }

// 宽度
// .wh(900);
// .wh(@n, @i: 1) when (@i <= @n) {
//   .w-@{i}px {
//     width: (@i * 1px);
//   }
//   .h-@{i}px {
//     height: (@i * 1px);
//   }
//   .p-@{i}px {
//     padding: (@i * 1px);
//   }
//   .pl-@{i}px {
//     padding-left: (@i * 1px);
//   }
//   .pt-@{i}px {
//     padding-top: (@i * 1px);
//   }
//   .pr-@{i}px {
//     padding-right: (@i * 1px);
//   }
//   .pb-@{i}px {
//     padding-bottom: (@i * 1px);
//   }
//   .px-@{i}px {
//     padding-left: (@i * 1px);
//     padding-right: (@i * 1px);
//   }
//   .py-@{i}px {
//     padding-left: (@i * 1px);
//     padding-right: (@i * 1px);
//   }
//   .m-@{i}px {
//     margin: (@i * 1px);
//   }
//   .ml-@{i}px {
//     margin-left: (@i * 1px);
//   }
//   .mt-@{i}px {
//     margin-top: (@i * 1px);
//   }
//   .mr-@{i}px {
//     margin-right: (@i * 1px);
//   }
//   .mb-@{i}px {
//     margin-bottom: (@i * 1px);
//   }
//   .mx-@{i}px {
//     margin-left: (@i * 1px);
//     margin-right: (@i * 1px);
//   }
//   .my-@{i}px {
//     margin-left: (@i * 1px);
//     margin-right: (@i * 1px);
//   }
//   .left-@{i}px {
//     left: (@i * 1px);
//   }
//   .top-@{i}px {
//     top: (@i * 1px);
//   }
//   .right-@{i}px {
//     right: (@i * 1px);
//   }
//   .bottom-@{i}px {
//     bottom: (@i * 1px);
//   }
//   .wh(@n, (@i + 1));
// }

/**
* @description less自定义原子类工厂
* @param {string} prefix 前缀
* @param {string} property 属性
* @param {string} unit 单位
* @param {number} start 起始值
* @param {number} end 结束值
* @param {number} step 步长
* @return 自命名的原子类
*/
.generate-atomic-classes(@prefix, @property, @unit: none, @start, @end, @step: 1) {
  // 无单位
  .unit-check() when (@unit = none) {
      .loop-properties(@index) when (@index <= @end) {
          .@{prefix}-@{index} {
              @{property}: @index;
          }
          .loop-properties(@index + @step);
      }
      .loop-properties(@start);
  }
  // px
  .unit-check() when (@unit = px) {
      .loop-properties(@index) when (@index <= @end) {
          .@{prefix}-@{index}@{unit} {
              @{property}: unit(@index, @unit);
          }
          .loop-properties(@index + @step);
      }
      .loop-properties(@start);
  }
  // 百分比
  .unit-check() when (@unit = pe) {
      .loop-properties(@index) when (@index <= @end) {
          .@{prefix}-@{index}@{unit} {
              @{property}: @index * 1%;
          }
          .loop-properties(@index + @step);
      }
      .loop-properties(@start);
  }
  // 其他单位
  .unit-check() when (not (@unit = none) and not (@unit = px) and not (@unit = pe)) {
      .loop-properties(@index) when (@index <= @end) {
          .@{prefix}-@{index}@{unit} {
              @{property}: unit(@index, @unit);
          }
          .loop-properties(@index + @step);
      }
      .loop-properties(@start);
  }
  .unit-check();
}

.generate-atomic-classes(w, width, px, 1, 300);// 生成 .w-1px { width: 1px; } ~ .w-100px { width: 100px; }
.generate-atomic-classes(w, width, pe, 1, 100);// 生成.w-1pe { width: 1%; } ~ .w-100pe { width: 100%; }
.generate-atomic-classes(h, height, px, 1, 100);// 生成.h-1px { height: 1px; } ~ .h-100px { height: 10px; }
.generate-atomic-classes(h, height, pe, 1, 100);// 生成.h-1pe { height: 1%; } ~ .h-100pe { height: 100%; }
// .generate-atomic-classes(fw, font-weight, none,400, 1000, 100);// 生成.fw-400 { font-weight: 400; } ~ .fw-1000 { font-weight: 1000; }
.generate-atomic-classes(m, margin, px, 1, 100);// 生成.m-1px { margin: 1px; } ~ .m-100px { margin: 100px; }
.generate-atomic-classes(ml, margin-left, px, 1, 100);
.generate-atomic-classes(mt, margin-top, px, 1, 100);
.generate-atomic-classes(mr, margin-right, px, 1, 100);
.generate-atomic-classes(mb, margin-bottom, px, 1, 100);
.generate-atomic-classes(p, padding, px, 1, 100);
.generate-atomic-classes(pl, margin-left, px, 1, 100);
.generate-atomic-classes(pt, margin-top, px, 1, 100);
.generate-atomic-classes(pr, margin-right, px, 1, 100);
.generate-atomic-classes(pb, margin-bottom, px, 1, 100);

.m-a{
	margin-left: auto;
	margin-right: auto;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.w-full {
	width: 100%;
}

.w-1-2 {
	width: 50%;
}

.w-1-3 {
	width: 33.333%;
}

.w-1-4 {
	width: 25%;
}

.w-1-5 {
	width: 20%;
}

.h-full {
	height: 100%;
}

.font-bold {
	font-weight: bold;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.color-white {
	color: #fff;
}

.color-333 {
	color: #333;
}

.color-666 {
	color: #666;
}

.color-999 {
	color: #999;
}

.color-pink {
	color: deeppink;
}

.color-blue {
	color: deepskyblue;
}

.bg-white {
	background: #fff;
}

.bg-333 {
	background: #333;
}

.bg-dedede {
	background: #dedede;
}

.bg-e1e1e1 {
	background: #e1e1e1;
}

.bg-f1f1f1 {
	background: #f1f1f1;
}

.color-blue {
	color: rgb(0, 175, 254)
}

.bg-blue {
	background: rgb(0, 175, 254)
}

.bg-pink {
	background-color: rgb(255, 233, 246);
}

.overflow-hidden {
	overflow: hidden;
}

.border-box{
	box-sizing: border-box;
}

scss

// 父级设置flex
.flex {
	display: flex
}

// 主轴排列方向，X轴和Y轴
.flex-x {
	flex-direction: row
}

.flex-y {
	flex-direction: column
}

/* 
确认主轴情况下的对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
*/
.flex-x-start {
	justify-content: flex-start
}

.flex-x-center {
	justify-content: center
}

.flex-x-end {
	justify-content: flex-end
}

.flex-x-between {
	justify-content: space-between
}

.flex-x-around {
	justify-content: space-around
}

.flex-x-evenly {
	justify-content: space-evenly
}

/* 
设置交叉轴上对齐方式，且在只有一根轴线情况下，即不设置换行
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐 
*/
.flex-y-start {
	align-items: flex-start
}

.flex-y-center {
	align-items: center
}

.flex-y-end {
	align-items: flex-end
}

// 换行
.flex-wrap {
	flex-wrap: wrap;
}

// 子元素
.self-start {
	align-self: flex-start;
}

.self-center {
	align-self: flex-center;
}

.self-end {
	align-self: flex-end;
}

.flex-1 {
	flex: 1 1 0%;
}

.rounded {
	border-radius: 100%;
}

// 宽度
@for $i from 1 through 100 {
	.w-#{$i}vw {
		width: #{$i}vw;
	}

	.h-#{$i}vh {
		height: #{$i}vh;
	}
}
// 宽度
@for $i from 0 through 900 {
	.w-#{$i}px {
		width: #{$i}rpx;
	}

	.h-#{$i}px {
		height: #{$i}rpx;
	}

	.leading-#{$i}px {
		line-height: #{$i}rpx;
	}

	.p-#{$i}px {
		padding: #{$i}rpx;
	}

	.px-#{$i}px {
		padding-left: #{$i}rpx;
		padding-right: #{$i}rpx;
	}

	.py-#{$i}px {
		padding-top: #{$i}rpx;
		padding-bottom: #{$i}rpx;
	}

	.pl-#{$i}px {
		padding-left: #{$i}rpx;
	}

	.pr-#{$i}px {
		padding-right: #{$i}rpx;
	}

	.pt-#{$i}px {
		padding-top: #{$i}rpx;
	}

	.pb-#{$i}px {
		padding-bottom: #{$i}rpx;
	}

	.m-#{$i}px {
		margin: #{$i}rpx;
	}

	.mx-#{$i}px {
		margin-left: #{$i}rpx;
		margin-right: #{$i}rpx;
	}

	.my-#{$i}px {
		margin-top: #{$i}rpx;
		margin-bottom: #{$i}rpx;
	}

	.ml-#{$i}px {
		margin-left: #{$i}rpx;
	}

	.mr-#{$i}px {
		margin-right: #{$i}rpx;
	}

	.mt-#{$i}px {
		margin-top: #{$i}rpx;
	}

	.mb-#{$i}px {
		margin-bottom: #{$i}rpx;
	}

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

	.text-#{$i}px {
		font-size: #{$i}rpx;
	}

	.top-#{$i}px {
		top: #{$i}rpx;
	}

	.right-#{$i}px {
		right: #{$i}rpx;
	}

	.bottom-#{$i}px {
		bottom: #{$i}rpx;
	}

	.left-#{$i}px {
		left: #{$i}rpx;
	}
}

.m-a{
	margin-left: auto;
	margin-right: auto;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.w-full {
	width: 100%;
}

.w-1-2 {
	width: 50%;
}

.w-1-3 {
	width: 33.333%;
}

.w-1-4 {
	width: 25%;
}

.w-1-5 {
	width: 20%;
}

.h-full {
	height: 100%;
}

.font-bold {
	font-weight: bold;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.color-white {
	color: #fff;
}

.color-333 {
	color: #333;
}

.color-666 {
	color: #666;
}

.color-999 {
	color: #999;
}

.color-pink {
	color: deeppink;
}

.color-blue {
	color: deepskyblue;
}

.bg-white {
	background: #fff;
}

.bg-333 {
	background: #333;
}

.bg-dedede {
	background: #dedede;
}

.bg-e1e1e1 {
	background: #e1e1e1;
}

.bg-f1f1f1 {
	background: #f1f1f1;
}

.color-blue {
	color: rgb(0, 175, 254)
}

.bg-blue {
	background: rgb(0, 175, 254)
}

.bg-pink {
	background-color: rgb(255, 233, 246);
}

.overflow-hidden {
	overflow: hidden;
}

.border-box{
	box-sizing: border-box;
}