Refactor(App): Change sass to less

src/assets/css/pages/tools/create.less

@@ -1,5 +1,4 @@
-@use "@/assets/css/mixins" as mixins;
-@use "@/assets/css/constants" as constants;
+@import "@/assets/css/constants";
 
 [data-component=tools-create] {
   .root-content {
@@ -22,7 +21,7 @@
           justify-content: center;
           align-items: center;
           font-size: 1.6em;
-          color: constants.$production-color;
+          color: @production-color;
           font-weight: bolder;
         }
       }
@@ -33,7 +32,7 @@
 
           .help {
             margin-left: 6px;
-            color: constants.$font-main-color;
+            color: @font-main-color;
             font-size: 0.8em;
           }
 
@@ -52,7 +51,7 @@
 
         .no-preview {
           font-weight: bolder;
-          color: constants.$font-secondary-color;
+          color: @font-secondary-color;
           font-size: 1.4em;
         }
       }

src/assets/css/pages/tools/index.less

@@ -1,5 +1,4 @@
-@use "@/assets/css/mixins" as mixins;
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
 [data-component=tools] {
   .root-content {
@@ -81,17 +80,13 @@
 
       :first-child, :last-child {
         height: 0;
-        border: {
-          width: 1px;
-          color: constants.$divide-color;
-          style: dashed;
-        };
+        border: 1px dashed @divide-color;
       }
 
       .divider-text {
         flex: 0 0 auto;
         font-size: 1.2em;
-        color: constants.$font-secondary-color;
+        color: @font-secondary-color;
       }
     }
 

src/assets/css/pages/tools/store.less

@@ -1,4 +1,4 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
 [data-component=tools-store] {
   .search {
@@ -37,7 +37,7 @@
       justify-content: center;
       font-size: 1.4em;
       font-weight: bolder;
-      color: constants.$font-secondary-color;
+      color: @font-secondary-color;
     }
   }
 

src/assets/css/pages/tools/user.less

@@ -1,12 +1,7 @@
-@use '@/assets/css/constants' as constants;
+@import "@/assets/css/constants";
 
 [data-component=tools-store-user] .root-content {
-  padding: {
-    top: 80px;
-    left: 20px;
-    right: 20px;
-    bottom: 20px;
-  };
+  padding: 80px 20px 20px 20px;
 
   .root-box {
     width: 100%;
@@ -36,10 +31,7 @@
       }
 
       .info-name {
-        margin: {
-          top: 20px;
-          left: 24px;
-        };
+        margin: 20px 0 0 24px;
         justify-content: center;
 
         > * {
@@ -49,7 +41,7 @@
         .nickname {
           font-size: 2.4em;
           font-weight: bolder;
-          color: constants.$production-color;
+          color: @production-color;
         }
 
         .url {
@@ -80,7 +72,7 @@
         margin-bottom: 20px;
         font-size: 1.2em;
         font-weight: bolder;
-        color: constants.$font-secondary-color;
+        color: @font-secondary-color;
       }
     }
   }