feat:less样式目录优化

README.md

@@ -18,3 +18,8 @@
 - chalk 控制台样式控制工具
 - fs-extra 扩展fs模块
 - ora 控制台加载中样式
+
+## 开发注意事项
+
+1. 样式
+  - 全局样式需写在src/global/global.less下， 涉及到color， size之类的属性尽量变量化 并且储存在/styles/theme.less中
\ No newline at end of file

src/global/styles/global.less

 
+/********************************** 布局 ******************************************/
+@import './mixins/layout.less';
+
+@makeCenters: text, block, flex, flexAlign, flexJustify, absolute, fixed, margin;
+@makeCentersLen: length(@makeCenters);
+
+.loopCenter(@list, @i: 1, @val: extract(@list, @i)) when (@i < @makeCentersLen + 1) {
+  .center-@{val} {
+    .make-center(@val);
+  }
+  .loopCenter(@list, @i + 1)
+};
+.loopCenter(@makeCenters);
+
 // antd default 
 h1, h2, h3, h4, h5, h6 {
   color: #6B778C;
 }
 .@{prefix}-margin_content {
+  .center-margin;
   width: 1190px;
-  margin-left: auto;
-  margin-right: auto;
 }
 
 .@{prefix}-content1024 {
+  .center-margin;
   width: 1024px;
-  margin-left: auto;
-  margin-right: auto;
 }

src/global/styles/mixins/layout.less

+/**
+* @description 布局类
+* @author xjm
+*/
+
+// ------------  容器container  ------------
+
+.make-container(@pad-x: @padding-lg) {
+  width: 100%;
+  .make-center(block);
+}
+.make-container(@pad-x) when not (@pad-x = none) {
+  padding-left: @pad-x;
+  padding-right: @pad-x;
+}
+
+// ------------  居中相关 center  ------------
+
+.make-center(@type:text) {}
+.make-center(@type) when (@type = text) {
+  text-align: center;
+}
+.make-center(@type) when (@type = margin) {
+  margin-left: auto;
+  margin-right: auto;
+}
+.make-center(@type) when (@type = block) {
+  .make-center(center);
+  display: block;
+}
+.make-center(@type) when (@type = flex) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.make-center(@type) when (@type = flexAlign) {
+  display: flex;
+  align-items: center;
+}
+.make-center(@type) when (@type = flexJustify) {
+  display: flex;
+  justify-content: center;
+}
+.make-center(@type) when (@type = absolute), (@type = fixed) {
+  position: @type;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}