styles:优化全局css

App.vue

@@ -74,7 +74,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import url("@/styles/layout.css");
 @import url("@/styles/iconfont.css");
 
 /* 隐藏scrollbar 滚动条 */

styles/layout.css → styles/layout.scss

@@ -33,85 +33,63 @@ image {
 .a-end{ align-items: flex-end; }
 .as-end{ align-self: flex-end; }
 
-.flex-1{ flex: 1; }
-.flex-2{ flex: 2; }
-.flex-3{ flex: 3; }
-.flex-4{ flex: 4; }
-.flex-5{ flex: 5; }
-
-/*  -- 内外边距 -- */
-.m-1 { margin: 10rpx; }
-.m-2 { margin: 20rpx; }
-.m-3 { margin: 30rpx; }
-.m-4 { margin: 40rpx; }
-.m-5 { margin: 50rpx; }
-.mt-1 { margin-top: 10rpx; }
-.mt-2 { margin-top: 20rpx; }
-.mt-3 { margin-top: 30rpx; }
-.mt-4 { margin-top: 40rpx; }
-.mt-5 { margin-top: 50rpx; }
-.mb-1 { margin-bottom: 10rpx; }
-.mb-2 { margin-bottom: 20rpx; }
-.mb-3 { margin-bottom: 30rpx; }
-.mb-4 { margin-bottom: 40rpx; }
-.mb-5 { margin-bottom: 50rpx; }
-.ml-1 { margin-left: 10rpx; }
-.ml-2 { margin-left: 20rpx; }
-.ml-3 { margin-left: 30rpx; }
-.ml-4 { margin-left: 40rpx; }
-.ml-5 { margin-left: 50rpx; }
-.mr-1 { margin-right: 10rpx; }
-.mr-2 { margin-right: 20rpx; }
-.mr-3 { margin-right: 30rpx; }
-.mr-4 { margin-right: 40rpx; }
-.mr-5 { margin-right: 50rpx; }
-.my-1 { margin-top: 10rpx; margin-bottom: 10rpx; }
-.my-2 { margin-top: 20rpx; margin-bottom: 20rpx; }
-.my-3 { margin-top: 30rpx; margin-bottom: 30rpx; }
-.my-4 { margin-top: 40rpx; margin-bottom: 40rpx; }
-.my-5 { margin-top: 50rpx; margin-bottom: 50rpx; }
-.mx-1 { margin-left: 10rpx; margin-right: 10rpx; }
-.mx-2 { margin-left: 20rpx; margin-right: 20rpx; }
-.mx-3 { margin-left: 30rpx; margin-right: 30rpx; }
-.mx-4 { margin-left: 40rpx; margin-right: 40rpx; }
-.mx-5 { margin-left: 50rpx; margin-right: 50rpx; }
+@for $i from 1 through 5 {
+    .flex-#{$i} {
+        flex: #{$i};
+    }
+}
 
-.p-1 { padding: 10rpx; }
-.p-2 { padding: 20rpx; }
-.p-3 { padding: 30rpx; }
-.p-4 { padding: 40rpx; }
-.p-5 { padding: 50rpx; }
-.pt-1 { padding-top: 10rpx; }
-.pt-2 { padding-top: 20rpx; }
-.pt-3 { padding-top: 30rpx; }
-.pt-4 { padding-top: 40rpx; }
-.pt-5 { padding-top: 50rpx; }
-.pb-1 { padding-bottom: 10rpx; }
-.pb-2 { padding-bottom: 20rpx; }
-.pb-3 { padding-bottom: 30rpx; }
-.pb-4 { padding-bottom: 40rpx; }
-.pb-5 { padding-bottom: 50rpx; }
-.pl-1 { padding-left: 10rpx; }
-.pl-2 { padding-left: 20rpx; }
-.pl-3 { padding-left: 30rpx; }
-.pl-4 { padding-left: 40rpx; }
-.pl-5 { padding-left: 50rpx; }
-.pr-1 { padding-right: 10rpx; }
-.pr-2 { padding-right: 20rpx; }
-.pr-3 { padding-right: 30rpx; }
-.pr-4 { padding-right: 40rpx; }
-.pr-5 { padding-right: 50rpx; }
-.py-1 { padding-top: 10rpx; padding-bottom: 10rpx; }
-.py-2 { padding-top: 20rpx; padding-bottom: 20rpx; }
-.py-3 { padding-top: 30rpx; padding-bottom: 30rpx; }
-.py-4 { padding-top: 40rpx; padding-bottom: 40rpx; }
-.py-5 { padding-top: 50rpx; padding-bottom: 50rpx; }
-.px-1 { padding-left: 10rpx; padding-right: 10rpx; }
-.px-2 { padding-left: 20rpx; padding-right: 20rpx; }
-.px-3 { padding-left: 30rpx; padding-right: 30rpx; }
-.px-4 { padding-left: 40rpx; padding-right: 40rpx; }
-.px-5 { padding-left: 50rpx; padding-right: 50rpx; }
+@for $i from 1 through 5 {
+    .m-#{$i} {
+        margin: #{$i}0rpx;
+    }
+	.mx-#{$i} {
+		margin-left: #{$i}0rpx;
+		margin-right: #{$i}0rpx;
+	}
+	.my-#{$i} {
+		margin-top: #{$i}0rpx;
+		margin-bottom: #{$i}0rpx;
+	}
+	.mr-#{$i} {
+		margin-right: #{$i}0rpx;
+	}
+	.ml-#{$i} {
+		margin-left: #{$i}0rpx;
+	}
+	.mt-#{$i} {
+		margin-top: #{$i}0rpx;
+	}
+	 .mb-#{$i} {
+		 margin-bottom: #{$i}0rpx;
+	 }
+}
 
+@for $i from 1 through 5 {
+    .p-#{$i} {
+        padding: #{$i}0rpx;
+    }
+	.px-#{$i} {
+		padding-left: #{$i}0rpx;
+		padding-right: #{$i}0rpx;
+	}
+	.py-#{$i} {
+		padding-top: #{$i}0rpx;
+		padding-bottom: #{$i}0rpx;
+	}
+	.pr-#{$i} {
+		padding-right: #{$i}0rpx;
+	}
+	.pl-#{$i} {
+		padding-left: #{$i}0rpx;
+	}
+	.pt-#{$i} {
+		padding-top: #{$i}0rpx;
+	}
+	.pb-#{$i} {
+		padding-bottom: #{$i}0rpx;
+	}
+}
 
 /* 文字对齐 */
 .text-left { text-align: left; }

uni.scss

-@import '@/styles/global.scss';
-@import '@/styles/mixins.scss';
\ No newline at end of file
+@import "@/styles/global.scss";
+@import "@/styles/layout.scss";
+@import "@/styles/mixins.scss";
\ No newline at end of file