颜色变量测试

+@namespace: 'tswj';
+
+/* ============ 颜色 ============ */
+
+// 主色调
+@base-color: #F9D95C;

@@ -102,7 +102,7 @@ export default {
 
 
     .upload {
     .upload {
       color: #713610;
       color: #713610;
-      background-color: #F9D95C;
+      background-color: @base-color;
       border-radius: 15px;
       border-radius: 15px;
       width: 4rem;
       width: 4rem;
       padding: 0.25rem 0.5rem;
       padding: 0.25rem 0.5rem;

@@ -128,9 +128,9 @@ export default {
   padding: 0.2rem;
   padding: 0.2rem;
   // margin: 0.25rem;
   // margin: 0.25rem;
   font-size: 0.9rem;
   font-size: 0.9rem;
-  background: #F9D95C;
+  background: @base-color;
   border-radius: 24px;
   border-radius: 24px;
-  border: 1px solid #F9D95C;
+  border: 1px solid @base-color;
   color: #713610;
   color: #713610;
   font-weight: bold;
   font-weight: bold;
   margin-left: 1rem;
   margin-left: 1rem;

@@ -42,7 +42,6 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-@base: #F9D95C;
   .button-primary {
   .button-primary {
     width: auto;
     width: auto;
     height: auto;
     height: auto;
@@ -50,9 +49,9 @@ export default {
     padding: 0.6rem;
     padding: 0.6rem;
     margin: 0.5rem;
     margin: 0.5rem;
     font-size: 1rem;
     font-size: 1rem;
-    background: @base;
+    background: @base-color;
     border-radius: 24px;
     border-radius: 24px;
-    border: 1px solid @base;
+    border: 1px solid @base-color;
     color: #713610;
     color: #713610;
     font-weight: bold;
     font-weight: bold;
   }
   }

@@ -181,7 +181,7 @@ export default {
             overflow: auto;
             overflow: auto;
             .text {
             .text {
               color: #222222; 
               color: #222222; 
-              border-bottom: 2px solid #F9D95C; 
+              border-bottom: 2px solid @base-color; 
               font-size: 0.85rem;
               font-size: 0.85rem;
               display: block; 
               display: block; 
               float: left;
               float: left;

@@ -252,7 +252,7 @@ body {
   // background-color: #FAFAFA;
   // background-color: #FAFAFA;
   .btn {
   .btn {
     margin: 16px;
     margin: 16px;
-    background-color: #F9D95C;
+    background-color: @base-color;
     text-align: center;
     text-align: center;
     color: #713610;
     color: #713610;
     font-size: 2vh;
     font-size: 2vh;

@@ -407,7 +407,7 @@ export default {
       }
       }
 
 
       .checked {
       .checked {
-        background: #F9D95C;
+        background: @base-color;
         border-radius: 15px;
         border-radius: 15px;
         padding: 0.5rem;
         padding: 0.5rem;
         text-align: center;
         text-align: center;

@@ -261,7 +261,7 @@ export default {
     .title {
     .title {
       color: #222222; 
       color: #222222; 
       font-size: 1.1rem; 
       font-size: 1.1rem; 
-      border-bottom: 2px solid #F9D95C; 
+      border-bottom: 2px solid @base-color; 
       padding: 0.5rem; 
       padding: 0.5rem; 
       text-align: center;
       text-align: center;
     }
     }

@@ -335,7 +335,7 @@ export default {
     border-radius: 24px;
     border-radius: 24px;
     // border: 1px solid F7F7F7;
     // border: 1px solid F7F7F7;
     color: #713610;
     color: #713610;
-    background-color: #F9D95C;
+    background-color: @base-color;
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
   }
   }
 }
 }