diff --git a/.cz-config.js b/.cz-config.js
index 64ba1974..350b0c4e 100644
--- a/.cz-config.js
+++ b/.cz-config.js
@@ -1,15 +1,15 @@
 "use strict";
 module.exports = {
   types: [
-    { value: "✨特性", name: "特性:    一个新的特性" },
-    { value: "🐛修复", name: "修复:    修复一个Bug" },
-    { value: "📝文档", name: "文档:    变更的只有文档" },
-    { value: "💄格式", name: "格式:    空格, 分号等格式修复" },
-    { value: "♻️重构", name: "重构:    代码重构，注意和特性、修复区分开" },
-    { value: "⚡️性能", name: "性能:    提升性能" },
-    { value: "✅测试", name: "测试:    添加一个测试" },
-    { value: "🔧工具", name: "工具:    开发工具变动(构建、脚手架工具等)" },
-    { value: "⏪回滚", name: "回滚:    代码回退" },
+    { value: "✨", name: "特性:    一个新的特性" },
+    { value: "🐛", name: "修复:    修复一个Bug" },
+    { value: "📝", name: "文档:    变更的只有文档" },
+    { value: "💄", name: "格式:    空格, 分号等格式修复" },
+    { value: "♻️", name: "重构:    代码重构，注意和特性、修复区分开" },
+    { value: "⚡️", name: "性能:    提升性能" },
+    { value: "✅", name: "测试:    添加一个测试" },
+    { value: "🔧", name: "工具:    开发工具变动(构建、脚手架工具等)" },
+    { value: "⏪", name: "回滚:    代码回退" },
   ],
   scopes: [
     { name: "component" },
diff --git a/package/component/package.json b/package/component/package.json
index 083fc127..8d4a5237 100644
--- a/package/component/package.json
+++ b/package/component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.0.5-dev.5",
+  "version": "1.0.5-dev.8",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
diff --git a/package/component/script/build.es.ts b/package/component/script/build.es.ts
index 301c2f01..18a47c44 100644
--- a/package/component/script/build.es.ts
+++ b/package/component/script/build.es.ts
@@ -89,7 +89,6 @@ export default (): UserConfigExport => {
             }
           },
           chunkFileNames: ({ name }) => {
-            console.log(name);
             return name === "index" ? "index.js" : "[name]/index.js";
           },
           entryFileNames: ({ name }) => {
diff --git a/package/component/src/component/avatar/index.less b/package/component/src/component/avatar/index.less
index 058bfb3c..73ea53de 100644
--- a/package/component/src/component/avatar/index.less
+++ b/package/component/src/component/avatar/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-avatar {
   box-sizing: border-box;
   margin: 0;
@@ -22,7 +19,7 @@
   width: 32px;
   height: 32px;
   line-height: 32px;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
 }
 
 .layui-avatar.layui-avatar-radius {
diff --git a/package/component/src/component/avatarList/index.less b/package/component/src/component/avatarList/index.less
deleted file mode 100644
index adcb011c..00000000
--- a/package/component/src/component/avatarList/index.less
+++ /dev/null
@@ -1,2 +0,0 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
\ No newline at end of file
diff --git a/package/component/src/component/backTop/index.less b/package/component/src/component/backTop/index.less
index bd643ac0..79ae491a 100644
--- a/package/component/src/component/backTop/index.less
+++ b/package/component/src/component/backTop/index.less
@@ -1,7 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-/** backtop **/
 @width: 50px;
 @height: @width;
 
@@ -18,7 +14,7 @@
   font-size: 40px;
   background-color: #9f9f9f;
   color: #ffffff;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
   opacity: 0.95;
   z-index: 999999;
   :hover {
diff --git a/package/component/src/component/badge/index.less b/package/component/src/component/badge/index.less
index 99316d30..86d5e905 100644
--- a/package/component/src/component/badge/index.less
+++ b/package/component/src/component/badge/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-badge,
 .layui-badge-dot,
 .layui-badge-rim {
@@ -11,7 +8,7 @@
   text-align: center;
   background-color: #ff5722;
   color: #fff;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
 }
 
 .layui-badge {
@@ -32,7 +29,7 @@
   border-width: 1px;
   border-style: solid;
   background-color: #fff;
-  border-color: @global-neutral-color-3;
+  border-color: var(--global-neutral-color-3);
   color: #666;
 }
 
diff --git a/package/component/src/component/body/index.less b/package/component/src/component/body/index.less
index c0d037cc..beeefb2e 100644
--- a/package/component/src/component/body/index.less
+++ b/package/component/src/component/body/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-body {
   display: block;
   flex: 1;
diff --git a/package/component/src/component/breadcrumb/index.less b/package/component/src/component/breadcrumb/index.less
index a4fae31d..bd70cda7 100644
--- a/package/component/src/component/breadcrumb/index.less
+++ b/package/component/src/component/breadcrumb/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-breadcrumb {
   font-size: 0;
 }
@@ -14,7 +11,7 @@
 }
 
 .layui-breadcrumb a:hover {
-  color: @global-checked-color !important;
+  color: var(--global-checked-color) !important;
 }
 
 .layui-breadcrumb a:nth-last-child(2) {
@@ -28,5 +25,5 @@
 
 .layui-breadcrumb span[lay-separator] {
   margin: 0 10px;
-  color: @global-neutral-color-7;
+  color: var(--global-neutral-color-7);
 }
diff --git a/package/component/src/component/button/index.less b/package/component/src/component/button/index.less
index 9eb5ebbe..22487315 100644
--- a/package/component/src/component/button/index.less
+++ b/package/component/src/component/button/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 :root {
   --button-primary-text-color: #fff;
   --button-primary-background-color: var(--global-primary-color);
diff --git a/package/component/src/component/buttonContainer/index.less b/package/component/src/component/buttonContainer/index.less
index 34a63a2a..a87c3414 100644
--- a/package/component/src/component/buttonContainer/index.less
+++ b/package/component/src/component/buttonContainer/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-btn-container {
   font-size: 0;
 }
diff --git a/package/component/src/component/buttonGroup/index.less b/package/component/src/component/buttonGroup/index.less
index 6d2315c0..278681a8 100644
--- a/package/component/src/component/buttonGroup/index.less
+++ b/package/component/src/component/buttonGroup/index.less
@@ -1,8 +1,7 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@button-primary-color: @global-primary-color;
-@button-border-radius: @global-border-radius;
+:root {
+  --button-primary-color: var(--global-primary-color);
+  --button-border-radius: var(--global-border-radius);
+}
 
 .layui-btn-group {
   vertical-align: middle;
@@ -20,11 +19,11 @@
 }
 
 .layui-btn-group .layui-btn:first-child {
-  border-radius: @button-border-radius 0 0 @button-border-radius;
+  border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
 }
 
 .layui-btn-group .layui-btn:last-child {
-  border-radius: 0 @button-border-radius @button-border-radius 0;
+  border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
 }
 
 .layui-btn-group .layui-btn + .layui-btn {
diff --git a/package/component/src/component/card/index.less b/package/component/src/component/card/index.less
index 13421853..bb7cf356 100644
--- a/package/component/src/component/card/index.less
+++ b/package/component/src/component/card/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 :root {
   --card-border-radius: var(--global-border-radius);
 }
diff --git a/package/component/src/component/carousel/index.less b/package/component/src/component/carousel/index.less
index 72bcb0b1..2f801c53 100644
--- a/package/component/src/component/carousel/index.less
+++ b/package/component/src/component/carousel/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-carousel {
   position: relative;
   left: 0;
@@ -24,7 +21,7 @@
   line-height: 20px;
   margin: -10px 0 0 -50px;
   text-align: center;
-  color: @global-neutral-color-8;
+  color: var(--global-neutral-color-8);
   font-family: layui-icon !important;
   font-size: 30px;
   font-style: normal;
@@ -139,7 +136,7 @@
   height: 10px;
   margin: 0 3px;
   font-size: 14px;
-  background-color: @global-neutral-color-3;
+  background-color: var(--global-neutral-color-3);
   background-color: rgba(255, 255, 255, 0.5);
   border-radius: 50%;
   cursor: pointer;
diff --git a/package/component/src/component/checkbox/index.less b/package/component/src/component/checkbox/index.less
index 37f766b2..fb3ce9c8 100644
--- a/package/component/src/component/checkbox/index.less
+++ b/package/component/src/component/checkbox/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-form-checkbox {
   position: relative;
   height: 30px;
@@ -19,13 +16,13 @@
   height: 100%;
   font-size: 14px;
   border-radius: 2px 0 0 2px;
-  background-color: @global-neutral-color-6;
+  background-color: var(--global-neutral-color-6);
   color: #fff;
   overflow: hidden;
 }
 
 .layui-form-checkbox:hover span {
-  background-color: @global-neutral-color-8;
+  background-color: var(--global-neutral-color-8);
 }
 
 .layui-form-checkbox i {
@@ -34,7 +31,7 @@
   width: 29px;
   height: 28px;
   position: absolute;
-  border: 1px solid @global-neutral-color-6;
+  border: 1px solid var(--global-neutral-color-6);
   border-radius: 0 2px 2px 0;
   color: #fff;
   font-size: 20px;
@@ -42,8 +39,8 @@
 }
 
 .layui-form-checkbox:hover i {
-  border-color: @global-neutral-color-8;
-  color: @global-neutral-color-8;
+  border-color: var(--global-neutral-color-8);
+  color: var(--global-neutral-color-8);
 }
 
 .layui-form-checkbox[lay-skin="primary"] {
@@ -72,7 +69,7 @@
   width: 16px;
   height: 16px;
   line-height: 16px;
-  border: 1px solid @global-neutral-color-6;
+  border: 1px solid var(--global-neutral-color-6);
   font-size: 12px;
   border-radius: 2px;
   background-color: #fff;
@@ -81,28 +78,28 @@
 }
 
 .layui-form-checkbox[lay-skin="primary"]:hover i {
-  border-color: @global-checked-color;
+  border-color: var(--global-checked-color);
   color: #fff;
 }
 
 .layui-form-checked,
 .layui-form-checked:hover {
-  border-color: @global-checked-color;
+  border-color: var(--global-checked-color);
 }
 
 .layui-form-checked i,
 .layui-form-checked:hover i {
-  color: @global-checked-color;
+  color: var(--global-checked-color);
 }
 
 .layui-form-checked span,
 .layui-form-checked:hover span {
-  background-color: @global-checked-color;
+  background-color: var(--global-checked-color);
 }
 
 .layui-form-checked[lay-skin="primary"] i {
-  border-color: @global-checked-color !important;
-  background-color: @global-checked-color;
+  border-color: var(--global-checked-color) !important;
+  background-color: var(--global-checked-color);
   color: #fff;
 }
 
@@ -112,24 +109,24 @@
 
 .layui-checkbox-disabled[lay-skin="primary"] span {
   background: 0 0 !important;
-  color: @global-neutral-color-8 !important;
+  color: var(--global-neutral-color-8) !important;
 }
 
 .layui-checkbox-disabled[lay-skin="primary"]:hover i {
-  border-color: @global-neutral-color-6;
+  border-color: var(--global-neutral-color-6);
 }
 
 .layui-checkbox-disabled,
 .layui-checkbox-disabled i {
-  border-color: @global-neutral-color-3 !important;
+  border-color: var(--global-neutral-color-3) !important;
 }
 
 .layui-checkbox-disabled span {
-  background-color: @global-neutral-color-3 !important;
+  background-color: var(--global-neutral-color-3) !important;
 }
 
 .layui-checkbox-disabled em {
-  color: @global-neutral-color-6 !important;
+  color: var(--global-neutral-color-6) !important;
 }
 
 .layui-checkbox-disabled:hover i {
diff --git a/package/component/src/component/collapse/index.less b/package/component/src/component/collapse/index.less
index 4e05e0b0..880c17fc 100644
--- a/package/component/src/component/collapse/index.less
+++ b/package/component/src/component/collapse/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-collapse {
   border-width: 1px;
   border-style: solid;
@@ -23,7 +20,7 @@
   line-height: 42px;
   padding: 0 15px 0 35px;
   color: #333;
-  background-color: @global-neutral-color-1;
+  background-color: var(--global-neutral-color-1);
   cursor: pointer;
   font-size: 14px;
   overflow: hidden;
diff --git a/package/component/src/component/colorPicker/index.less b/package/component/src/component/colorPicker/index.less
index 3849d438..4002a28d 100644
--- a/package/component/src/component/colorPicker/index.less
+++ b/package/component/src/component/colorPicker/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-color-picker {
   position: relative;
   user-select: none;
@@ -109,7 +106,7 @@
   width: 26px;
   height: 26px;
   display: block;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
   background-size: 10px 10px;
 }
@@ -180,9 +177,9 @@
 }
 
 .layui-colorpicker {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
   padding: 5px;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
   line-height: 24px;
   display: inline-block;
   cursor: pointer;
@@ -191,7 +188,7 @@
 }
 
 .layui-colorpicker:hover {
-  border-color: @global-neutral-color-6;
+  border-color: var(--global-neutral-color-6);
 }
 
 .layui-colorpicker.layui-colorpicker-lg {
@@ -223,7 +220,7 @@
   height: 100%;
   box-sizing: border-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
   text-align: center;
 }
 
@@ -246,7 +243,7 @@
   margin: 5px 0;
   padding: 7px;
   background: #fff;
-  border: 1px solid @global-neutral-color-6;
+  border: 1px solid var(--global-neutral-color-6);
   border-radius: 2px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
 }
diff --git a/package/component/src/component/container/index.less b/package/component/src/component/container/index.less
index 451fd0ef..80671658 100644
--- a/package/component/src/component/container/index.less
+++ b/package/component/src/component/container/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-container {
   position: relative;
   margin: 0 auto;
diff --git a/package/component/src/component/datePicker/index.less b/package/component/src/component/datePicker/index.less
index c8bbcf47..59aa85d3 100644
--- a/package/component/src/component/datePicker/index.less
+++ b/package/component/src/component/datePicker/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 @font-face {
   font-family: "laydate-icon";
   src: url("./font/iconfont.eot");
diff --git a/package/component/src/component/dropdown/index.less b/package/component/src/component/dropdown/index.less
index 29465de0..a7671851 100644
--- a/package/component/src/component/dropdown/index.less
+++ b/package/component/src/component/dropdown/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-dropdown {
   position: relative;
   display: inline-block;
@@ -22,7 +19,7 @@
 }
 
 .layui-dropdown dl > .layui-dropdown-menu {
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
 }
 
 .layui-dropdown-up > dl {
diff --git a/package/component/src/component/empty/index.less b/package/component/src/component/empty/index.less
index c41632af..c748f96a 100644
--- a/package/component/src/component/empty/index.less
+++ b/package/component/src/component/empty/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-empty {
   margin: 0 8px;
   font-size: 14px;
diff --git a/package/component/src/component/exception/index.less b/package/component/src/component/exception/index.less
index a792d3e5..57ce1ba7 100644
--- a/package/component/src/component/exception/index.less
+++ b/package/component/src/component/exception/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-exception {
   .layui-exception-image {
     width: 50%;
diff --git a/package/component/src/component/field/index.less b/package/component/src/component/field/index.less
index 151e7540..5c171bd8 100644
--- a/package/component/src/component/field/index.less
+++ b/package/component/src/component/field/index.less
@@ -1,19 +1,13 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@field-border-color: var(--field-border-color);
-@field-border-radius: var(--field-border-radius);
-
 :root {
-  --field-border-color: @global-neutral-color-3;
-  --field-border-radius: @global-border-radius;
+  --field-border-color: var(--global-neutral-color-3);
+  --field-border-radius: var(--global-border-radius);
 }
 
 .layui-field {
   margin-bottom: 10px;
   padding: 0;
   border-width: 1px;
-  border-color: @field-border-color;
+  border-color: var(--field-border-color);
   border-style: solid;
 }
 
diff --git a/package/component/src/component/footer/index.less b/package/component/src/component/footer/index.less
index 5f15e708..3657b36a 100644
--- a/package/component/src/component/footer/index.less
+++ b/package/component/src/component/footer/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-footer {
   box-sizing: border-box;
 }
\ No newline at end of file
diff --git a/package/component/src/component/form/index.less b/package/component/src/component/form/index.less
index 565ee2d7..b3d5dc75 100644
--- a/package/component/src/component/form/index.less
+++ b/package/component/src/component/form/index.less
@@ -1,129 +1,125 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-form-item {
-    margin-bottom: 20px;
-    clear: both;
-    *zoom: 1;
-  }
-  
-  .layui-form-item:after {
-    content: "\20";
-    clear: both;
-    *zoom: 1;
-    display: block;
-    height: 0;
-  }
-  
-  .layui-form-label {
-    float: left;
-    display: block;
-    padding: 9px 15px;
-    width: 80px;
-    font-weight: 400;
-    line-height: 20px;
-    text-align: right;
-  }
-  
-  .layui-form-label-col {
-    display: block;
-    float: none;
-    padding: 9px 0;
-    line-height: 20px;
-    text-align: left;
-  }
-  
-  .layui-form-item .layui-inline {
-    margin-bottom: 5px;
-    margin-right: 10px;
-  }
-  
-  .layui-input-block {
-    margin-left: 110px;
-    min-height: 36px;
-  }
-  
-  .layui-input-inline {
-    display: inline-block;
-    vertical-align: middle;
-  }
-  
-  .layui-form-item .layui-input-inline {
-    float: left;
-    width: 190px;
-    margin-right: 10px;
-  }
-  
-  .layui-form-text .layui-input-inline {
-    width: auto;
-  }
-  
-  .layui-form-mid {
-    float: left;
-    display: block;
-    padding: 9px 0 !important;
-    line-height: 20px;
-    margin-right: 10px;
-  }
-  
-  .layui-form-danger + .layui-form-select .layui-input,
-  .layui-form-danger:focus {
-    border-color: #ff5722 !important;
-  }
-  
-  .layui-form-item .layui-form-checkbox {
-    margin-top: 4px;
-  }
-  
-  .layui-form-item .layui-form-checkbox[lay-skin="primary"] {
-    margin-top: 10px;
-  }
+  margin-bottom: 20px;
+  clear: both;
+  *zoom: 1;
+}
 
-  .layui-required {
-    color: #ff5722;
-    font-size: 12px;
-    line-height: 1;
-  }
-  
-  .layui-form .layui-form-item {
-    .layui-input-block,
-    .layui-input-inline {
-      .layui-form-danger {
-        &,
-        .layui-input {
-          border-color: #ff5722 !important;
-        }
+.layui-form-item:after {
+  content: "\20";
+  clear: both;
+  *zoom: 1;
+  display: block;
+  height: 0;
+}
+
+.layui-form-label {
+  float: left;
+  display: block;
+  padding: 9px 15px;
+  width: 80px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: right;
+}
+
+.layui-form-label-col {
+  display: block;
+  float: none;
+  padding: 9px 0;
+  line-height: 20px;
+  text-align: left;
+}
+
+.layui-form-item .layui-inline {
+  margin-bottom: 5px;
+  margin-right: 10px;
+}
+
+.layui-input-block {
+  margin-left: 110px;
+  min-height: 36px;
+}
+
+.layui-input-inline {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.layui-form-item .layui-input-inline {
+  float: left;
+  width: 190px;
+  margin-right: 10px;
+}
+
+.layui-form-text .layui-input-inline {
+  width: auto;
+}
+
+.layui-form-mid {
+  float: left;
+  display: block;
+  padding: 9px 0 !important;
+  line-height: 20px;
+  margin-right: 10px;
+}
+
+.layui-form-danger + .layui-form-select .layui-input,
+.layui-form-danger:focus {
+  border-color: #ff5722 !important;
+}
+
+.layui-form-item .layui-form-checkbox {
+  margin-top: 4px;
+}
+
+.layui-form-item .layui-form-checkbox[lay-skin="primary"] {
+  margin-top: 10px;
+}
+
+.layui-required {
+  color: #ff5722;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.layui-form .layui-form-item {
+  .layui-input-block,
+  .layui-input-inline {
+    .layui-form-danger {
+      &,
+      .layui-input {
+        border-color: #ff5722 !important;
       }
     }
   }
-  
-  .layui-error-message {
-    color: #ff5722;
-    font-size: 12px;
-    line-height: 1;
-    padding-top: 5px;
-    position: absolute;
-    top: 100%;
-    left: 0;
+}
+
+.layui-error-message {
+  color: #ff5722;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 5px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+}
+
+.layui-error-message-anim {
+  -ms-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-animation: layui-top-show-anim 0.3s ease 1;
+  animation: layui-top-show-anim 0.3s ease 1;
+}
+
+@keyframes layui-top-show-anim {
+  0% {
+    opacity: 0.3;
+    transform: rotateX(45deg);
   }
-  
-  .layui-error-message-anim {
-    -ms-transform-origin: 0 0;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-animation: layui-top-show-anim 0.3s ease 1;
-    animation: layui-top-show-anim 0.3s ease 1;
+
+  100% {
+    opacity: 1;
+    transform: rotateX(0);
   }
-  
-  @keyframes layui-top-show-anim {
-    0% {
-      opacity: 0.3;
-      transform: rotateX(45deg);
-    }
-  
-    100% {
-      opacity: 1;
-      transform: rotateX(0);
-    }
-  }
-  
\ No newline at end of file
+}
diff --git a/package/component/src/component/fullscreen/index.less b/package/component/src/component/fullscreen/index.less
index a96c1b92..eac3742b 100644
--- a/package/component/src/component/fullscreen/index.less
+++ b/package/component/src/component/fullscreen/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-fullscreen {
   position: fixed;
   top: 0;
diff --git a/package/component/src/component/header/index.less b/package/component/src/component/header/index.less
index ee396d21..db47be9d 100644
--- a/package/component/src/component/header/index.less
+++ b/package/component/src/component/header/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-header {
   box-sizing: border-box;
   height: 60px;
diff --git a/package/component/src/component/icon/index.less b/package/component/src/component/icon/index.less
index adcb011c..e69de29b 100644
--- a/package/component/src/component/icon/index.less
+++ b/package/component/src/component/icon/index.less
@@ -1,2 +0,0 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
\ No newline at end of file
diff --git a/package/component/src/component/iconPicker/index.less b/package/component/src/component/iconPicker/index.less
index 3bd8b80f..1ecc534e 100644
--- a/package/component/src/component/iconPicker/index.less
+++ b/package/component/src/component/iconPicker/index.less
@@ -1,12 +1,6 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@icon-picker-border-radius: var(--icon-picker-border-radius);
-@icon-picker-checked-color: var(--icon-picker-checked-color);
-
 :root {
-    --icon-picker-border-radius: @global-border-radius;
-    --icon-picker-checked-color: @global-checked-color;
+    --icon-picker-border-radius: var(--global-border-radius);
+    --icon-picker-checked-color: var(--global-checked-color);
 }
 
 .layui-iconpicker {
@@ -15,7 +9,7 @@
   line-height: 38px;
   border-width: 1px;
   border-style: solid;
-  border-radius: @icon-picker-border-radius;
+  border-radius: var(--icon-picker-border-radius);
   cursor: pointer;
 }
 
@@ -95,13 +89,13 @@
 }
 
 .layui-iconpicker-list li:hover {
-  background-color: @global-neutral-color-1;
+  background-color: var(--global-neutral-color-1);
   color: rgba(0, 0, 0, 0.5);
 }
 
 .layui-iconpicker-list li.layui-this {
-  border-color: @icon-picker-checked-color;
-  color: @icon-picker-checked-color;
+  border-color: var(--icon-picker-checked-color);
+  color: var(--icon-picker-checked-color);
 }
 
 .layui-iconpicker-list li .layui-icon {
diff --git a/package/component/src/component/input/index.less b/package/component/src/component/input/index.less
index d6b35053..3916e737 100644
--- a/package/component/src/component/input/index.less
+++ b/package/component/src/component/input/index.less
@@ -1,12 +1,6 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@input-border-radius: var(--input-border-radius);
-@input-border-color: var(--input-border-color);
-
 :root {
-  --input-border-radius: @global-border-radius;
-  --input-border-color: @global-neutral-color-3;
+  --input-border-radius: var(--global-border-radius);
+  --input-border-color: var(--global-neutral-color-3);
 }
 
 .layui-input {
@@ -27,8 +21,8 @@
   border-width: 1px;
   border-style: solid;
   display: inline-flex;
-  border-color: @input-border-color;
-  border-radius:  @input-border-radius;
+  border-color: var(--input-border-color);
+  border-radius:  var(--input-border-radius);
 }
 
 .layui-input-prefix {
diff --git a/package/component/src/component/inputNumber/index.less b/package/component/src/component/inputNumber/index.less
index 0ce0ca99..14351d0e 100644
--- a/package/component/src/component/inputNumber/index.less
+++ b/package/component/src/component/inputNumber/index.less
@@ -1,8 +1,5 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 @border-color: #eee;
-@hover-border-color: @global-primary-color;
+@hover-border-color: var(--global-primary-color);
 @lg: 40px;
 @lg-wdith: 200px;
 @lg-right: 20px;
@@ -51,7 +48,7 @@
   box-sizing: border-box;
   border: 1px solid @border-color;
   border-color: @border-color;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
   overflow: hidden;
   .set-size(@lg-wdith, @lg, @lg-right);
   margin-left: 5px;
diff --git a/package/component/src/component/layout/index.less b/package/component/src/component/layout/index.less
index e6cdcc2f..fd808c29 100644
--- a/package/component/src/component/layout/index.less
+++ b/package/component/src/component/layout/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-layout {
   flex: 1;
   display: flex;
diff --git a/package/component/src/component/line/index.less b/package/component/src/component/line/index.less
index f4481b22..ccf4c08e 100644
--- a/package/component/src/component/line/index.less
+++ b/package/component/src/component/line/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-line {
   &-horizontal {
     position: relative;
@@ -9,7 +6,7 @@
     min-width: 100%;
     max-width: 100%;
     margin: 10px 0;
-    border-bottom: var(--layui-line-border-width) var(--layui-line-border-style) @global-neutral-color-5;
+    border-bottom: var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);
     border-top-style: none;
     border-left-style: none;
     border-right-style: none;
@@ -26,7 +23,7 @@
     height: 1em;
     margin: 0 8px;
     vertical-align: middle;
-    border-left: var(--layui-line-border-width) var(--layui-line-border-style) @global-neutral-color-5;
+    border-left: var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);
     border-top-style: none;
     border-bottom-style: none;
     border-right-style: none;
diff --git a/package/component/src/component/logo/index.less b/package/component/src/component/logo/index.less
index 1d1a90e4..96b6781a 100644
--- a/package/component/src/component/logo/index.less
+++ b/package/component/src/component/logo/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-logo {
   left: 0;
   top: 0;
@@ -8,6 +5,6 @@
   height: 60px;
   line-height: 60px;
   text-align: center;
-  color: @global-primary-color;
+  color: var(--global-primary-color);
   font-size: 16px;
 }
\ No newline at end of file
diff --git a/package/component/src/component/menu/index.less b/package/component/src/component/menu/index.less
index e1558694..cef8cac0 100644
--- a/package/component/src/component/menu/index.less
+++ b/package/component/src/component/menu/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-nav .layui-show.layui-anim-upbit .layui-show.layui-anim-upbit {
   top: 0px;
   left: calc(100% + 5px);
@@ -62,7 +59,7 @@
   top: 0;
   width: 0;
   height: 3px;
-  background-color: @global-checked-color;
+  background-color: var(--global-checked-color);
   transition: all 0.2s;
   -webkit-transition: all 0.2s;
   pointer-events: none;
@@ -211,13 +208,13 @@
 .layui-nav-tree .layui-nav-bar {
   width: 5px;
   height: 0;
-  background-color: @global-primary-color;
+  background-color: var(--global-primary-color);
 }
 
 .layui-nav-tree .layui-this,
 .layui-nav-tree .layui-nav-child dd.layui-this,
 .layui-nav-tree .layui-this > a:hover {
-  background-color: @global-primary-color;
+  background-color: var(--global-primary-color);
   color: #fff;
 }
 
@@ -293,14 +290,14 @@
 
 .layui-nav-tree.inverted .layui-this,
 .layui-nav-tree.inverted .layui-this:hover {
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
   margin: 0px 6px;
   width: auto;
 }
 
 .layui-nav-tree.inverted .layui-this > a,
 .layui-nav-tree.inverted .layui-this:hover > a {
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
 }
 
 .layui-nav-tree.inverted .layui-this > a {
diff --git a/package/component/src/component/page/index.less b/package/component/src/component/page/index.less
index 951ba0c1..fe84e48a 100644
--- a/package/component/src/component/page/index.less
+++ b/package/component/src/component/page/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-laypage {
   display: inline-block;
   *display: inline;
@@ -33,7 +30,7 @@
 .layui-laypage input,
 .layui-laypage select,
 .layui-laypage span {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
 }
 
 .layui-laypage a,
@@ -52,7 +49,7 @@
 }
 
 .layui-laypage a:hover {
-  color: @global-primary-color;
+  color: var(--global-primary-color);
 }
 
 .layui-laypage em {
@@ -84,7 +81,7 @@
   padding: 1px;
   width: 100%;
   height: 100%;
-  background-color: @global-primary-color;
+  background-color: var(--global-primary-color);
 }
 
 .layui-laypage-em {
@@ -154,7 +151,7 @@
 
 .layui-laypage input:focus,
 .layui-laypage select:focus {
-  border-color: @global-primary-color !important;
+  border-color: var(--global-primary-color) !important;
 }
 
 .layui-laypage button {
diff --git a/package/component/src/component/panel/index.less b/package/component/src/component/panel/index.less
index 4110c619..78dfb2f4 100644
--- a/package/component/src/component/panel/index.less
+++ b/package/component/src/component/panel/index.less
@@ -1,19 +1,13 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@panel-border-color: var(--panel-border-color);
-@panel-border-radius: var(--panel-border-radius);
-
 :root {
-  --panel-border-color: @global-neutral-color-3;
-  --panel-border-radius: @global-border-radius;
+  --panel-border-color: var(--global-neutral-color-3);
+  --panel-border-radius: var(--global-border-radius);
 }
 
 .layui-panel {
   border-width: 1px;
   border-style: solid;
-  border-radius: @panel-border-radius;
-  border-color: @panel-border-color;
+  border-radius: var(--panel-border-radius);
+  border-color: var(--panel-border-color);
   background-color: #fff;
 }
 
diff --git a/package/component/src/component/popper/index.less b/package/component/src/component/popper/index.less
index 49e3240f..51a39664 100644
--- a/package/component/src/component/popper/index.less
+++ b/package/component/src/component/popper/index.less
@@ -1,5 +1,3 @@
-@import (reference) "../../theme/variable.less";
-
 // 主题颜色
 // 浅色 --> 默认使用
 @ligh-background: #FFF;
diff --git a/package/component/src/component/progress/index.less b/package/component/src/component/progress/index.less
index 217a7dec..cdd8cb68 100644
--- a/package/component/src/component/progress/index.less
+++ b/package/component/src/component/progress/index.less
@@ -1,11 +1,8 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-progress {
   position: relative;
   height: 6px;
   border-radius: 20px;
-  background-color: @global-neutral-color-3;
+  background-color: var(--global-neutral-color-3);
 }
 
 .layui-progress-bar {
@@ -17,7 +14,7 @@
   height: 6px;
   border-radius: 20px;
   text-align: right;
-  background-color: @global-checked-color;
+  background-color: var(--global-checked-color);
   transition: all 0.3s;
   -webkit-transition: all 0.3s;
 }
diff --git a/package/component/src/component/quote/index.less b/package/component/src/component/quote/index.less
index 721ffd16..6678ab4c 100644
--- a/package/component/src/component/quote/index.less
+++ b/package/component/src/component/quote/index.less
@@ -1,21 +1,15 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@block-default-color: var(--block-default-color);
-@block-border-radius: var(--block-border-radius);
-
 :root {
-  --block-default-color: @global-checked-color;
-  --block-border-radius: @global-border-radius;
+  --block-default-color: var(--global-checked-color);
+  --block-border-radius: var(--global-border-radius);
 }
 
 .layui-quote {
   padding: 15px;
   line-height: 1.6;
   margin-bottom: 10px;
-  border-left: 5px solid @block-default-color;
-  border-radius: @block-border-radius;
-  background-color: @global-neutral-color-1;
+  border-left: 5px solid var(--block-default-color);
+  border-radius: var(--block-border-radius);
+  background-color: var(--global-neutral-color-1);
 }
 
 .layui-quote-nm {
diff --git a/package/component/src/component/radio/index.less b/package/component/src/component/radio/index.less
index 080e8588..aac72d04 100644
--- a/package/component/src/component/radio/index.less
+++ b/package/component/src/component/radio/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-form-radio,
 .layui-form-radio * {
   display: inline-block;
@@ -22,19 +19,19 @@
 .layui-form-radio > i {
   margin-right: 8px;
   font-size: 22px;
-  color: @global-neutral-color-8;
+  color: var(--global-neutral-color-8);
 }
 
 .layui-form-radio:hover *,
 .layui-form-radioed,
 .layui-form-radioed > i {
-  color: @global-checked-color;
+  color: var(--global-checked-color);
 }
 
 .layui-radio-disabled > i {
-  color: @global-neutral-color-3 !important;
+  color: var(--global-neutral-color-3) !important;
 }
 
 .layui-radio-disabled * {
-  color: @global-neutral-color-8 !important;
+  color: var(--global-neutral-color-8) !important;
 }
diff --git a/package/component/src/component/rate/index.less b/package/component/src/component/rate/index.less
index 53b656ee..ebe42ecc 100644
--- a/package/component/src/component/rate/index.less
+++ b/package/component/src/component/rate/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-rate,
 .layui-rate * {
   display: inline-block;
diff --git a/package/component/src/component/result/index.less b/package/component/src/component/result/index.less
index 6ad80111..a683a59d 100644
--- a/package/component/src/component/result/index.less
+++ b/package/component/src/component/result/index.less
@@ -1,28 +1,30 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .result {
   text-align: center;
 }
+
 .result .success svg {
   color: #32c682;
   text-align: center;
   margin-top: 40px;
 }
+
 .result .failure svg {
   color: #f56c6c;
   text-align: center;
   margin-top: 40px;
 }
+
 .result .title {
   margin-top: 25px;
 }
+
 .result .desc {
   margin-top: 25px;
   width: 60%;
   margin-left: 20%;
   color: rgba(0, 0, 0, 0.45);
 }
+
 .result .content {
   margin-top: 20px;
   width: 80%;
@@ -30,8 +32,9 @@
   background-color: white;
   margin-left: 10%;
 }
+
 .result .extra {
   padding-top: 10px;
   border-top: 1px whitesmoke solid;
   margin-top: 25px;
-}
+}
\ No newline at end of file
diff --git a/package/component/src/component/ripple/index.less b/package/component/src/component/ripple/index.less
index 1a81f29b..f5920597 100644
--- a/package/component/src/component/ripple/index.less
+++ b/package/component/src/component/ripple/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-water-ripples-container {
   position: relative;
   display: inline-block;
diff --git a/package/component/src/component/row/index.less b/package/component/src/component/row/index.less
index f0dd6fb3..f39000a9 100644
--- a/package/component/src/component/row/index.less
+++ b/package/component/src/component/row/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-row:after,
 .layui-row:before {
   content: "";
diff --git a/package/component/src/component/scroll/index.less b/package/component/src/component/scroll/index.less
index 49f9e109..62cb2a55 100644
--- a/package/component/src/component/scroll/index.less
+++ b/package/component/src/component/scroll/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .scrollbar-box {
   height: 100%;
   overflow: hidden !important;
diff --git a/package/component/src/component/select/index.less b/package/component/src/component/select/index.less
index 8799f9af..c0390841 100644
--- a/package/component/src/component/select/index.less
+++ b/package/component/src/component/select/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 dl.layui-anim-upbit > dd input[type="checkbox"] {
   display: none;
 }
@@ -80,7 +77,7 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
   margin-top: -3px;
   cursor: pointer;
   border-width: 6px;
-  border-top-color: @global-neutral-color-8;
+  border-top-color: var(--global-neutral-color-8);
   border-top-style: solid;
   transition: all 0.3s;
   -webkit-transition: all 0.3s;
@@ -94,11 +91,11 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
   padding: 5px 0;
   z-index: 899;
   min-width: 100%;
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
   max-height: 300px;
   overflow-y: auto;
   background-color: #fff;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
   box-sizing: border-box;
   box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
 }
@@ -122,7 +119,7 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
 }
 
 .layui-form-select dl dd:hover {
-  background-color: @global-neutral-color-2;
+  background-color: var(--global-neutral-color-2);
   -webkit-transition: 0.5s all;
   transition: 0.5s all;
 }
@@ -137,8 +134,8 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
 }
 
 .layui-form-select dl dd.layui-this {
-  background-color: @global-neutral-color-2;
-  color: @global-checked-color;
+  background-color: var(--global-neutral-color-2);
+  color: var(--global-checked-color);
   font-weight: 700;
 }
 
diff --git a/package/component/src/component/side/index.less b/package/component/src/component/side/index.less
index cc1d35b4..29313ab1 100644
--- a/package/component/src/component/side/index.less
+++ b/package/component/src/component/side/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-side {
   overflow: auto;
   overflow-x: hidden;
diff --git a/package/component/src/component/skeleton/index.less b/package/component/src/component/skeleton/index.less
index cadf7f45..af5419fa 100644
--- a/package/component/src/component/skeleton/index.less
+++ b/package/component/src/component/skeleton/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .lay-skeleton {
   .lay-skeleton-item {
     height: 16px;
diff --git a/package/component/src/component/slider/index.less b/package/component/src/component/slider/index.less
index 1f29bc74..c8800f31 100644
--- a/package/component/src/component/slider/index.less
+++ b/package/component/src/component/slider/index.less
@@ -1,7 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-// 横向样式
 .layui-slider-v {
   width: 100%;
   height: 18px;
@@ -19,9 +15,9 @@
 .layui-slider-btn-v {
   width: 12px;
   height: 12px;
-  background-color: @global-back-color;
+  background-color: var(--global-back-color);
   position: absolute;
-  border: 2px solid @global-primary-color;
+  border: 2px solid var(--global-primary-color);
   border-radius: 50%;
   cursor: pointer;
   left: 0%;
@@ -34,7 +30,7 @@
   position: absolute;
   top: 6px;
   left: 0;
-  background-color: @global-primary-color;
+  background-color: var(--global-primary-color);
   z-index: 1;
 }
 
@@ -57,7 +53,7 @@
 }
 
 .layui-slider-disabled-rate {
-  background-color: @global-primary-color !important;
+  background-color: var(--global-primary-color) !important;
 }
 
 // 纵向样式
@@ -75,9 +71,9 @@
 .layui-slider-vertical-btn {
   width: 12px;
   height: 12px;
-  background-color: @global-back-color;
+  background-color: var(--global-back-color);
   position: absolute;
-  border: 2px solid @global-primary-color;
+  border: 2px solid var(--global-primary-color);
   border-radius: 50%;
   cursor: pointer;
   bottom: 0%;
@@ -91,7 +87,7 @@
   position: absolute;
   bottom: 0;
   left: 7px;
-  background-color: @global-primary-color;
+  background-color: var(--global-primary-color);
   z-index: 1;
 }
 
diff --git a/package/component/src/component/splitPanel/index.less b/package/component/src/component/splitPanel/index.less
index 0e719856..4b7869ab 100644
--- a/package/component/src/component/splitPanel/index.less
+++ b/package/component/src/component/splitPanel/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .lay-split-panel {
   height: 100%;
   display: flex;
@@ -19,7 +16,7 @@
     height: 100%;
     width: 3px;
     border: 1px #eeeeee solid;
-    background-color: @global-neutral-color-1;
+    background-color: var(--global-neutral-color-1);
     border-left: none;
     border-right: none;
     cursor: col-resize;
@@ -51,7 +48,7 @@
     height: 3px;
     cursor: row-resize;
     border: 1px #eeeeee solid;
-    background-color: @global-neutral-color-1;
+    background-color: var(--global-neutral-color-1);
     border-top: none;
     border-bottom: none;
     &:before {
diff --git a/package/component/src/component/step/index.less b/package/component/src/component/step/index.less
index 801e747c..0ef334dd 100644
--- a/package/component/src/component/step/index.less
+++ b/package/component/src/component/step/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 @width-height-pace: 24px;
 @step-color: @step-success-color;
 @step-fail-color: #ff5722;
diff --git a/package/component/src/component/switch/index.less b/package/component/src/component/switch/index.less
index e86bde9a..8cbc7caa 100644
--- a/package/component/src/component/switch/index.less
+++ b/package/component/src/component/switch/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-form-switch {
   position: relative;
   height: 22px;
@@ -9,7 +6,7 @@
   padding: 0 4px;
   border-radius: 20px;
   cursor: pointer;
-  background-color: @global-neutral-color-6;
+  background-color: var(--global-neutral-color-6);
   -webkit-transition: 0.1s linear;
   transition: 0.1s linear;
 }
@@ -44,8 +41,8 @@
 }
 
 .layui-form-onswitch {
-  border-color: @global-checked-color;
-  background-color: @global-checked-color;
+  border-color: var(--global-checked-color);
+  background-color: var(--global-checked-color);
 }
 
 .layui-form-onswitch span {
@@ -62,24 +59,24 @@
 
 .layui-switch-disabled[lay-skin="primary"] span {
   background: 0 0 !important;
-  color: @global-neutral-color-8 !important;
+  color: var(--global-neutral-color-8) !important;
 }
 
 .layui-switch-disabled[lay-skin="primary"]:hover i {
-  border-color: @global-neutral-color-6;
+  border-color: var(--global-neutral-color-6);
 }
 
 .layui-switch-disabled,
 .layui-switch-disabled i {
-  border-color: @global-neutral-color-3 !important;
+  border-color: var(--global-neutral-color-3) !important;
 }
 
 .layui-switch-disabled span {
-  background-color: @global-neutral-color-3 !important;
+  background-color: var(--global-neutral-color-3) !important;
 }
 
 .layui-switch-disabled em {
-  color: @global-neutral-color-6 !important;
+  color: var(--global-neutral-color-6) !important;
 }
 
 .layui-switch-disabled:hover i {
diff --git a/package/component/src/component/tab/index.less b/package/component/src/component/tab/index.less
index 0321c1dd..4bca3d68 100644
--- a/package/component/src/component/tab/index.less
+++ b/package/component/src/component/tab/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-tab {
   margin: 10px 0;
   text-align: left !important;
@@ -26,7 +23,7 @@
 }
 
 .layui-tab-card .layui-tab-head {
-  background-color: @global-neutral-color-1;
+  background-color: var(--global-neutral-color-1);
 }
 
 .layui-tab-title {
@@ -89,11 +86,11 @@
 
 
 .layui-tab-title.is-right {
-  border-left: 1px solid @global-neutral-color-3;
+  border-left: 1px solid var(--global-neutral-color-3);
 }
 
 .layui-tab-title.is-left {
-  border-right: 1px solid @global-neutral-color-3;
+  border-right: 1px solid var(--global-neutral-color-3);
 }
 
 .layui-tab-title.is-right .layui-this {
@@ -125,12 +122,12 @@
 }
 
 .layui-tab-title.is-left .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
   border-right-color: #FFF;
 }
 
 .layui-tab-title.is-right .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
   border-left-color: #FFF;
 }
 
@@ -139,21 +136,21 @@
 }
 
 .layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this {
-  color: @global-primary-color;
+  color: var(--global-primary-color);
 }
 
 .layui-tab-brief>.layui-tab-head>.layui-tab-more li.layui-this:after,
 .layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this:after {
   border: none;
   border-radius: 0;
-  border-bottom: 2px solid @global-checked-color;
+  border-bottom: 2px solid var(--global-checked-color);
 }
 
 .layui-tab-brief>.layui-tab-head.is-right>.layui-tab-title{
-  border-left: 1px solid @global-neutral-color-3;
+  border-left: 1px solid var(--global-neutral-color-3);
 }
 .layui-tab-brief>.layui-tab-head.is-left>.layui-tab-title {
-  border-right: 1px solid @global-neutral-color-3;
+  border-right: 1px solid var(--global-neutral-color-3);
 }
 
 .layui-tab-brief[overflow]>.layui-tab-head>.layui-tab-title .layui-this:after {
@@ -164,7 +161,7 @@
 .layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title .layui-this:after {
   border: none;
   border-radius: 0;
-  border-right: 2px solid @global-checked-color;
+  border-right: 2px solid var(--global-checked-color);
   margin-left: 1px;
 }
 
@@ -172,7 +169,7 @@
 .layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title .layui-this:after {
   border: none;
   border-radius: 0;
-  border-left: 2px solid @global-checked-color;
+  border-left: 2px solid var(--global-checked-color);
   margin-right: 1px;
 }
 
@@ -195,22 +192,22 @@
 }
 
 .layui-tab-card>.layui-tab-head>.layui-tab-title.is-top .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
   border-bottom-color: #fff;
 }
 
 .layui-tab-card>.layui-tab-head>.layui-tab-title.is-bottom .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
   border-top-color: #fff;
 }
 
 .layui-tab-card>.layui-tab-head>.layui-tab-title.is-left .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
   border-right-color: #fff;
 }
 
 .layui-tab-card>.layui-tab-head>.layui-tab-title.is-right .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
   border-left-color: #fff;
 }
 
@@ -224,7 +221,7 @@
 
 .layui-tab-card>.layui-tab-more .layui-this {
   background: 0 0;
-  color: @global-checked-color;
+  color: var(--global-checked-color);
 }
 
 .layui-tab-card>.layui-tab-more .layui-this:after {
@@ -266,7 +263,7 @@
 }
 
 .layui-tab-more li.layui-this:after {
-  border-bottom-color: @global-neutral-color-3;
+  border-bottom-color: var(--global-neutral-color-3);
   border-radius: 2px;
 }
 
@@ -291,7 +288,7 @@
   top: 1px;
   text-align: center;
   font-size: 14px;
-  color: @global-neutral-color-8;
+  color: var(--global-neutral-color-8);
   transition: all 0.2s;
   -webkit-transition: all 0.2s;
 }
diff --git a/package/component/src/component/table/index.less b/package/component/src/component/table/index.less
index 2e46f2db..24fec2d9 100644
--- a/package/component/src/component/table/index.less
+++ b/package/component/src/component/table/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-table-col-special {
   width: 34px;
 }
@@ -31,7 +28,7 @@
 .layui-table-total,
 .layui-table-total tr,
 .layui-table[lay-even] tr:nth-child(even) {
-  background-color: @global-neutral-color-1;
+  background-color: var(--global-neutral-color-1);
 }
 
 .layui-table td,
diff --git a/package/component/src/component/textarea/index.less b/package/component/src/component/textarea/index.less
index 48b78325..946c0e5e 100644
--- a/package/component/src/component/textarea/index.less
+++ b/package/component/src/component/textarea/index.less
@@ -1,12 +1,6 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@textarea-border-radius: var(--textarea-border-radius);
-@textarea-border-color: var(--textarea-border-color);
-
 :root {
-  --textarea-border-radius: @global-border-radius;
-  --textarea-border-color: @global-neutral-color-3;
+  --textarea-border-radius: var(--global-border-radius);
+  --textarea-border-color: var(--global-neutral-color-3);
 }
 
 .layui-textarea {
@@ -14,8 +8,8 @@
   border-style: solid;
   background-color: #fff;
   color: rgba(0, 0, 0, 0.85);
-  border-radius: @textarea-border-radius;
-  border-color: @textarea-border-color;
+  border-radius: var(--textarea-border-radius);
+  border-color: var(--textarea-border-color);
   display: block;
   width: 100%;
   height: auto;
diff --git a/package/component/src/component/timeline/index.less b/package/component/src/component/timeline/index.less
index 00ba5adf..6de571f6 100644
--- a/package/component/src/component/timeline/index.less
+++ b/package/component/src/component/timeline/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-timeline {
   padding-left: 5px;
 }
@@ -19,7 +16,7 @@
   height: 20px;
   line-height: 20px;
   background-color: #fff;
-  color: @global-checked-color;
+  color: var(--global-checked-color);
   border-radius: 50%;
   text-align: center;
   cursor: pointer;
diff --git a/package/component/src/component/transfer/index.less b/package/component/src/component/transfer/index.less
index 12896f54..48be3993 100644
--- a/package/component/src/component/transfer/index.less
+++ b/package/component/src/component/transfer/index.less
@@ -1,10 +1,5 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@transfer-box-border-radius: var(--transfer-box-border-radius);
-
 :root {
-  --transfer-box-border-radius: @global-border-radius;
+  --transfer-box-border-radius: var(--global-border-radius);
 }
 
 .layui-transfer .layui-btn + .layui-btn {
@@ -24,7 +19,7 @@
   border-width: 1px;
   width: 200px;
   height: 360px;
-  border-radius: @transfer-box-border-radius;
+  border-radius: var(--transfer-box-border-radius);
   background-color: #fff;
 }
 
diff --git a/package/component/src/component/tree/index.less b/package/component/src/component/tree/index.less
index f1b91944..12ec8076 100644
--- a/package/component/src/component/tree/index.less
+++ b/package/component/src/component/tree/index.less
@@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-tree {
   line-height: 22px;
 }
diff --git a/package/component/src/component/upload/index.less b/package/component/src/component/upload/index.less
index 7a008370..0a5a567c 100644
--- a/package/component/src/component/upload/index.less
+++ b/package/component/src/component/upload/index.less
@@ -1,17 +1,13 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
 @import "./cropper.min.css";
 
 .layui-upload-file {
-  // display: none !important;
   opacity: 0.01;
   position: relative;
   filter: Alpha(opacity=1);
   cursor: pointer;
-  
 }
-.layui-upload-btn-box{
-  position:relative;
+.layui-upload-btn-box {
+  position: relative;
   overflow: hidden;
 }
 .layui-upload-drag,
@@ -37,7 +33,7 @@
 .layui-upload-drag {
   position: relative;
   padding: 30px;
-  border: 1px dashed @global-neutral-color-4;
+  border: 1px dashed var(--global-neutral-color-4);
   background-color: #fff;
   text-align: center;
   cursor: pointer;
@@ -46,14 +42,14 @@
 
 .layui-upload-drag .layui-icon {
   font-size: 50px;
-  color: @global-primary-color;
+  color: var(--global-primary-color);
 }
 
 .layui-upload-drag[lay-over] {
-  border-color: @global-primary-color;
+  border-color: var(--global-primary-color);
 }
-.layui-upload-drag-draging{
-  border-color: @global-primary-color;
+.layui-upload-drag-draging {
+  border-color: var(--global-primary-color);
 }
 
 .layui-upload-iframe {
@@ -82,27 +78,27 @@
   opacity: 0.01;
   filter: Alpha(opacity=1);
 }
-.layui-upload-file-disabled{
-  cursor:not-allowed !important;
+.layui-upload-file-disabled {
+  cursor: not-allowed !important;
 }
 .layui-btn-container .layui-upload-choose {
   padding-left: 0;
 }
 
-.layui-upload-drag-disable{
-  opacity:0.8;
-  z-index:1;
+.layui-upload-drag-disable {
+  opacity: 0.8;
+  z-index: 1;
   cursor: not-allowed;
 }
 
-._lay_upload_img{
+._lay_upload_img {
   display: block;
   max-width: 100%;
 }
-.layui-upload-list-disabled{
-  width:auto;
-  height:auto;
+.layui-upload-list-disabled {
+  width: auto;
+  height: auto;
   pointer-events: none !important;
-  background-color: #fbfbfb!important;
+  background-color: #fbfbfb !important;
   filter: opacity(0.9);
-}
\ No newline at end of file
+}
diff --git a/package/component/src/theme/public.less b/package/component/src/theme/public.less
index a142d0b8..c78dec65 100644
--- a/package/component/src/theme/public.less
+++ b/package/component/src/theme/public.less
@@ -129,7 +129,7 @@ a:hover {
 
 .layui-disabled,
 .layui-disabled:hover {
-  color: @global-neutral-color-6 !important;
+  color: var(--global-neutral-color-6) !important;
   cursor: not-allowed !important;
 }
 
@@ -170,7 +170,7 @@ a:hover {
 .layui-tab-card,
 .layui-tab-title,
 .layui-tab-title .layui-this:after {
-  border-color: @global-neutral-color-3;
+  border-color: var(--global-neutral-color-3);
 }
 
 .layui-form input[type="checkbox"],
diff --git a/package/component/src/theme/variable.less b/package/component/src/theme/variable.less
index e9e1cf76..e6ce6c0f 100644
--- a/package/component/src/theme/variable.less
+++ b/package/component/src/theme/variable.less
@@ -1,35 +1,3 @@
-@global-primary-color: var(--global-primary-color);
-
-@global-normal-color: var(--global-normal-color);
-
-@global-warm-color: var(--global-warm-color);
-
-@global-danger-color: var(--global-danger-color);
-
-@global-checked-color: var(--global-checked-color);
-
-@global-border-radius: var(--global-border-radius);
-
-@global-fore-color: var(--global-fore-color);
-
-@global-back-color: var(--global-back-color);
-
-@global-neutral-color-1: var(--global-neutral-color-1);
-
-@global-neutral-color-2: var(--global-neutral-color-2);
-
-@global-neutral-color-3: var(--global-neutral-color-3);
-
-@global-neutral-color-4: var(--global-neutral-color-4);
-
-@global-neutral-color-5: var(--global-neutral-color-5);
-
-@global-neutral-color-6: var(--global-neutral-color-6);
-
-@global-neutral-color-7: var(--global-neutral-color-7);
-
-@global-neutral-color-8: var(--global-neutral-color-8);
-
 :root {
 
   --global-primary-color: #009688;