From 33996db3fa3140050c96b93ed52af42e172c722e Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 17 Aug 2021 09:50:28 +0800
Subject: [PATCH] chore: demo using css vars (#9265)

---
 src/action-sheet/demo/index.vue    |  5 ++---
 src/badge/demo/index.vue           |  8 +++-----
 src/button/demo/index.vue          | 12 +++++-------
 src/card/demo/index.vue            |  4 +---
 src/checkbox/demo/index.vue        |  8 +++-----
 src/circle/demo/index.vue          |  8 +++-----
 src/col/demo/index.vue             |  8 +++-----
 src/collapse/demo/index.vue        |  4 +---
 src/config-provider/demo/index.vue |  4 +---
 src/contact-list/demo/index.vue    |  4 +---
 src/count-down/demo/index.vue      | 10 ++++------
 src/dialog/demo/index.vue          |  2 --
 src/divider/demo/index.vue         |  6 ++----
 src/empty/demo/index.vue           |  4 +---
 src/icon/demo/index.vue            |  8 +++-----
 src/image/demo/index.vue           |  8 +++-----
 src/lazyload/demo/index.vue        | 10 ++++------
 src/list/demo/index.vue            |  6 ++----
 src/loading/demo/index.vue         |  4 +---
 src/notice-bar/demo/index.vue      |  4 +---
 src/number-keyboard/demo/index.vue |  4 +---
 src/overlay/demo/index.vue         |  6 ++----
 src/pagination/demo/index.vue      |  4 +---
 src/popover/demo/index.vue         |  6 ++----
 src/popup/demo/index.vue           |  6 ++----
 src/progress/demo/index.vue        |  4 +---
 src/pull-refresh/demo/index.vue    |  6 ++----
 src/radio/demo/index.vue           |  4 +---
 src/rate/demo/index.vue            |  4 +---
 src/sidebar/demo/index.vue         |  8 +++-----
 src/skeleton/demo/index.vue        | 10 ++++------
 src/slider/demo/index.vue          |  8 +++-----
 src/steps/demo/index.vue           |  6 ++----
 src/sticky/demo/index.vue          |  4 +---
 src/style/demo/index.vue           | 10 ++++------
 src/submit-bar/demo/index.vue      |  6 ++----
 src/swipe-cell/demo/index.vue      |  4 +---
 src/swipe/demo/index.vue           |  8 +++-----
 src/switch/demo/index.vue          |  4 +---
 src/tab/demo/index.vue             |  4 +---
 src/tag/demo/index.vue             |  4 +---
 src/uploader/demo/index.vue        |  6 ++----
 42 files changed, 85 insertions(+), 168 deletions(-)

diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index 3f680d806..d369212b2 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -124,11 +124,10 @@ const onCancel = () => Toast(t('cancel'));
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-action-sheet {
   &-content {
-    padding: @padding-md @padding-md @padding-md * 10;
+    padding: var(--van-padding-md) var(--van-padding-md)
+      calc(var(--van-padding-md) * 10);
   }
 }
 </style>
diff --git a/src/badge/demo/index.vue b/src/badge/demo/index.vue
index a00aacd97..dd9ff74ae 100644
--- a/src/badge/demo/index.vue
+++ b/src/badge/demo/index.vue
@@ -87,19 +87,17 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-badge {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-badge__wrapper {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   .child {
     width: 40px;
     height: 40px;
-    background: @gray-2;
+    background: var(--van-gray-2);
     border-radius: 4px;
   }
 
diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue
index 8e88ea1e1..ead252995 100644
--- a/src/button/demo/index.vue
+++ b/src/button/demo/index.vue
@@ -140,24 +140,22 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-button {
-  background: @white;
+  background: var(--van-white);
 
   .van-button {
     &--large {
-      margin-bottom: @padding-md;
+      margin-bottom: var(--van-padding-md);
     }
 
     &--small,
     &--normal:not(:last-child) {
-      margin-right: @padding-md;
+      margin-right: var(--van-padding-md);
     }
   }
 
   .van-doc-demo-block {
-    padding: 0 @padding-md;
+    padding: 0 var(--van-padding-md);
   }
 
   .van-doc-demo-block__title {
@@ -165,7 +163,7 @@ const t = useTranslate(i18n);
   }
 
   &-row {
-    margin-bottom: @padding-sm;
+    margin-bottom: var(--van-padding-sm);
   }
 }
 </style>
diff --git a/src/card/demo/index.vue b/src/card/demo/index.vue
index 143f975ce..ec28774f2 100644
--- a/src/card/demo/index.vue
+++ b/src/card/demo/index.vue
@@ -72,9 +72,7 @@ const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-card {
-  background-color: @white;
+  background-color: var(--van-white);
 }
 </style>
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index 8f4d7ae9b..e13c82b26 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -179,10 +179,8 @@ const toggleAll = () => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-checkbox {
-  background: @white;
+  background: var(--van-white);
 
   .van-checkbox {
     margin: 0 0 8px 20px;
@@ -199,10 +197,10 @@ const toggleAll = () => {
   }
 
   &-buttons {
-    margin-top: @padding-md;
+    margin-top: var(--van-padding-md);
 
     .van-button {
-      margin-left: @padding-md;
+      margin-left: var(--van-padding-md);
     }
   }
 
diff --git a/src/circle/demo/index.vue b/src/circle/demo/index.vue
index c8ad48bba..bda072870 100644
--- a/src/circle/demo/index.vue
+++ b/src/circle/demo/index.vue
@@ -116,18 +116,16 @@ const reduce = () => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-circle {
   .van-circle {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   .van-button {
-    margin: @padding-md 0 0 10px;
+    margin: var(--van-padding-md) 0 0 10px;
 
     &:first-of-type {
-      margin-left: @padding-md;
+      margin-left: var(--van-padding-md);
     }
   }
 }
diff --git a/src/col/demo/index.vue b/src/col/demo/index.vue
index c3ea3f180..b06cf0a79 100644
--- a/src/col/demo/index.vue
+++ b/src/col/demo/index.vue
@@ -69,13 +69,11 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-col {
-  background: @white;
+  background: var(--van-white);
 
   .van-doc-demo-block {
-    padding: 0 @padding-md;
+    padding: 0 var(--van-padding-md);
   }
 
   .van-doc-demo-block__title {
@@ -84,7 +82,7 @@ const t = useTranslate(i18n);
 
   .van-col {
     margin-bottom: 10px;
-    color: @white;
+    color: var(--van-white);
     font-size: 13px;
     line-height: 30px;
     text-align: center;
diff --git a/src/collapse/demo/index.vue b/src/collapse/demo/index.vue
index 89324bd84..05c006bad 100644
--- a/src/collapse/demo/index.vue
+++ b/src/collapse/demo/index.vue
@@ -87,12 +87,10 @@ const state = reactive({
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-collapse {
   .van-icon-question-o {
     margin-left: 5px;
-    color: @blue;
+    color: var(--van-blue);
     font-size: 15px;
     vertical-align: -3px;
   }
diff --git a/src/config-provider/demo/index.vue b/src/config-provider/demo/index.vue
index 4587debbb..756a873dd 100644
--- a/src/config-provider/demo/index.vue
+++ b/src/config-provider/demo/index.vue
@@ -88,12 +88,10 @@ const themeVars = {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-collapse {
   .van-icon-question-o {
     margin-left: 5px;
-    color: @blue;
+    color: var(--van-blue);
     font-size: 15px;
     vertical-align: -3px;
   }
diff --git a/src/contact-list/demo/index.vue b/src/contact-list/demo/index.vue
index 29c81ab16..88cb28694 100644
--- a/src/contact-list/demo/index.vue
+++ b/src/contact-list/demo/index.vue
@@ -72,12 +72,10 @@ const onSelect = (contact: { id: string }) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-contact-card {
   .van-popup {
     height: 100%;
-    background-color: @background-color;
+    background-color: var(--van-background-color);
   }
 }
 </style>
diff --git a/src/count-down/demo/index.vue b/src/count-down/demo/index.vue
index 3fee81b1e..d6bc8e9a1 100644
--- a/src/count-down/demo/index.vue
+++ b/src/count-down/demo/index.vue
@@ -88,19 +88,17 @@ const onFinish = () => Toast(t('finished'));
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-count-down {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-count-down {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   .colon {
     display: inline-block;
     margin: 0 4px;
-    color: @red;
+    color: var(--van-red);
   }
 
   .block {
@@ -109,7 +107,7 @@ const onFinish = () => Toast(t('finished'));
     color: #fff;
     font-size: 12px;
     text-align: center;
-    background-color: @red;
+    background-color: var(--van-red);
     border-radius: 4px;
   }
 
diff --git a/src/dialog/demo/index.vue b/src/dialog/demo/index.vue
index ea6c54d94..787660620 100644
--- a/src/dialog/demo/index.vue
+++ b/src/dialog/demo/index.vue
@@ -109,8 +109,6 @@ const onClickBeforeClose = () => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-dialog {
   img {
     box-sizing: border-box;
diff --git a/src/divider/demo/index.vue b/src/divider/demo/index.vue
index 7c094aeb2..ea576651c 100644
--- a/src/divider/demo/index.vue
+++ b/src/divider/demo/index.vue
@@ -58,13 +58,11 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-divider {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-doc-demo-block__title {
-    padding-top: @padding-md;
+    padding-top: var(--van-padding-md);
   }
 }
 </style>
diff --git a/src/empty/demo/index.vue b/src/empty/demo/index.vue
index 9ace22cbb..7b0b99937 100644
--- a/src/empty/demo/index.vue
+++ b/src/empty/demo/index.vue
@@ -64,10 +64,8 @@ const active = ref('error');
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-empty {
-  background: @white;
+  background: var(--van-white);
 
   .custom-image {
     .van-empty__image {
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index 56a911d02..a86a6f1ed 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -183,8 +183,6 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-icon {
   font-size: 0;
 
@@ -210,19 +208,19 @@ const copy = (icon: string, option: Record<string, unknown> = {}) => {
       height: 36px;
       margin: -4px 0 4px;
       padding: 0 5px;
-      color: @gray-7;
+      color: var(--van-gray-7);
       font-size: 12px;
       line-height: 18px;
     }
 
     &:active {
-      background-color: @active-color;
+      background-color: var(--van-active-color);
     }
   }
 
   .van-icon {
     margin: 16px 0 16px;
-    color: @text-color;
+    color: var(--van-text-color);
     font-size: 32px;
   }
 
diff --git a/src/image/demo/index.vue b/src/image/demo/index.vue
index da63f4f07..b4d71235e 100644
--- a/src/image/demo/index.vue
+++ b/src/image/demo/index.vue
@@ -88,14 +88,12 @@ const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'];
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-image {
   overflow-x: hidden;
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-row {
-    padding: 0 @padding-md;
+    padding: 0 var(--van-padding-md);
   }
 
   .van-col {
@@ -104,7 +102,7 @@ const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'];
 
   .text {
     margin-top: 5px;
-    color: @gray-7;
+    color: var(--van-gray-7);
     font-size: 14px;
     text-align: center;
   }
diff --git a/src/lazyload/demo/index.vue b/src/lazyload/demo/index.vue
index 49d307ac3..0bed30145 100644
--- a/src/lazyload/demo/index.vue
+++ b/src/lazyload/demo/index.vue
@@ -51,19 +51,17 @@ const componentImageList = [
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-lazyload {
-  padding-right: @padding-md;
-  padding-left: @padding-md;
+  padding-right: var(--van-padding-md);
+  padding-left: var(--van-padding-md);
 
   img,
   div[lazy] {
     box-sizing: border-box;
     width: 100%;
     height: 250px;
-    margin-bottom: @padding-md;
-    padding: @padding-md;
+    margin-bottom: var(--van-padding-md);
+    padding: var(--van-padding-md);
     background-color: white;
     background-repeat: no-repeat;
     background-size: 100% 100%;
diff --git a/src/list/demo/index.vue b/src/list/demo/index.vue
index fe324daa6..7f747492d 100644
--- a/src/list/demo/index.vue
+++ b/src/list/demo/index.vue
@@ -120,8 +120,6 @@ const onRefresh = (index: number) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-list {
   .van-cell {
     text-align: center;
@@ -130,7 +128,7 @@ const onRefresh = (index: number) => {
   .page-desc {
     margin: 0;
     padding: 5px 0;
-    color: @gray-7;
+    color: var(--van-gray-7);
     font-size: 14px;
     text-align: center;
 
@@ -144,7 +142,7 @@ const onRefresh = (index: number) => {
   }
 
   .van-checkbox__label {
-    color: @gray-7;
+    color: var(--van-gray-7);
   }
 }
 </style>
diff --git a/src/loading/demo/index.vue b/src/loading/demo/index.vue
index 34d19ea41..2ceadf147 100644
--- a/src/loading/demo/index.vue
+++ b/src/loading/demo/index.vue
@@ -62,10 +62,8 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-loading {
-  background: @white;
+  background: var(--van-white);
 
   .van-loading {
     display: inline-block;
diff --git a/src/notice-bar/demo/index.vue b/src/notice-bar/demo/index.vue
index 84a74fbb2..89d57d0e7 100644
--- a/src/notice-bar/demo/index.vue
+++ b/src/notice-bar/demo/index.vue
@@ -72,10 +72,8 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-notice-bar {
-  background: @white;
+  background: var(--van-white);
 
   .van-notice-bar:not(:first-of-type) {
     margin-top: 4px;
diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue
index 3ce78f629..43dc15548 100644
--- a/src/number-keyboard/demo/index.vue
+++ b/src/number-keyboard/demo/index.vue
@@ -153,13 +153,11 @@ const isTest = process.env.NODE_ENV === 'test';
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-number-keyboard {
   padding-bottom: 300px;
 
   .van-button {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 }
 </style>
diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue
index 0457472fe..ee06719a5 100644
--- a/src/overlay/demo/index.vue
+++ b/src/overlay/demo/index.vue
@@ -45,10 +45,8 @@ const showEmbedded = ref(false);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-overlay {
-  background: @white;
+  background: var(--van-white);
 
   .wrapper {
     display: flex;
@@ -60,7 +58,7 @@ const showEmbedded = ref(false);
   .block {
     width: 120px;
     height: 120px;
-    background-color: @white;
+    background-color: var(--van-white);
     border-radius: 4px;
   }
 }
diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue
index e751a7021..7a161175c 100644
--- a/src/pagination/demo/index.vue
+++ b/src/pagination/demo/index.vue
@@ -77,8 +77,6 @@ const currentPage4 = ref(1);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-pagination {
   .van-pagination {
     width: 100%;
@@ -86,7 +84,7 @@ const currentPage4 = ref(1);
   }
 
   .van-doc-demo-block {
-    padding: 0 @padding-md;
+    padding: 0 var(--van-padding-md);
   }
 
   .van-doc-demo-block__title {
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 20447fff9..46ee53cc3 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -211,18 +211,16 @@ const onSelect = (action: { text: string }) => Toast(action.text);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-popover {
   &-refer {
     width: 60px;
     height: 60px;
-    background-color: @blue;
+    background-color: var(--van-blue);
     border-radius: 8px;
   }
 
   .van-popover__wrapper {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   .van-field {
diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue
index 9dd85bfc8..ac85ead05 100644
--- a/src/popup/demo/index.vue
+++ b/src/popup/demo/index.vue
@@ -140,15 +140,13 @@ const showCustomIconPosition = ref(false);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-popup {
   .van-row {
-    margin-bottom: @padding-md;
+    margin-bottom: var(--van-padding-md);
   }
 
   .van-button {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 }
 </style>
diff --git a/src/progress/demo/index.vue b/src/progress/demo/index.vue
index 64f988ecd..e8bb23281 100644
--- a/src/progress/demo/index.vue
+++ b/src/progress/demo/index.vue
@@ -43,10 +43,8 @@ const t = useTranslate(i18n);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-progress {
-  background: @white;
+  background: var(--van-white);
 
   .van-progress {
     margin: 20px;
diff --git a/src/pull-refresh/demo/index.vue b/src/pull-refresh/demo/index.vue
index 8636b6a9a..2df13f5c5 100644
--- a/src/pull-refresh/demo/index.vue
+++ b/src/pull-refresh/demo/index.vue
@@ -97,10 +97,8 @@ onMounted(preloadImage);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-pull-refresh {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-pull-refresh {
     height: calc(100vh - 50px);
@@ -115,7 +113,7 @@ onMounted(preloadImage);
 
   p {
     margin: 0;
-    padding: @padding-md 0 0 @padding-md;
+    padding: var(--van-padding-md) 0 0 var(--van-padding-md);
   }
 }
 </style>
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index b7291153e..f28b4c781 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -137,10 +137,8 @@ const inactiveIcon = 'https://img.yzcdn.cn/vant/user-inactive.png';
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-radio {
-  background: @white;
+  background: var(--van-white);
 
   &-group {
     padding: 0 16px;
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue
index f12097767..69f1d0845 100644
--- a/src/rate/demo/index.vue
+++ b/src/rate/demo/index.vue
@@ -86,14 +86,12 @@ const onChange = (value: number) => Toast(t('toastContent', value));
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-rate {
   padding-bottom: 20px;
   background-color: #fff;
 
   .van-rate {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 }
 </style>
diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue
index ba06f41a9..15f41e224 100644
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@@ -67,18 +67,16 @@ const onChange = (index: number) => Toast(`${t('title')} ${index + 1}`);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-sidebar {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-sidebar {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   &-title {
     margin-bottom: 16px;
-    color: @gray-6;
+    color: var(--van-gray-6);
     font-weight: normal;
     font-size: 14px;
   }
diff --git a/src/skeleton/demo/index.vue b/src/skeleton/demo/index.vue
index b758ee876..388eb8044 100644
--- a/src/skeleton/demo/index.vue
+++ b/src/skeleton/demo/index.vue
@@ -46,18 +46,16 @@ const show = ref(false);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-skeleton {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-switch {
-    margin: 0 @padding-md @padding-xs;
+    margin: 0 var(--van-padding-md) var(--van-padding-xs);
   }
 
   .demo-preview {
     display: flex;
-    padding: 0 @padding-md;
+    padding: 0 var(--van-padding-md);
 
     .demo-content {
       padding-top: 6px;
@@ -79,7 +77,7 @@ const show = ref(false);
       flex-shrink: 0;
       width: 32px;
       height: 32px;
-      margin-right: @padding-md;
+      margin-right: var(--van-padding-md);
     }
   }
 }
diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue
index ddddd02ed..cbe86b933 100644
--- a/src/slider/demo/index.vue
+++ b/src/slider/demo/index.vue
@@ -95,14 +95,12 @@ const onChange = (value: string) => Toast(t('text') + value);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-slider {
-  background: @white;
+  background: var(--van-white);
   user-select: none;
 
   .van-doc-demo-block {
-    padding: 0 @padding-md 20px;
+    padding: 0 var(--van-padding-md) 20px;
   }
 
   .van-doc-demo-block__title {
@@ -115,7 +113,7 @@ const onChange = (value: string) => Toast(t('text') + value);
     font-size: 10px;
     line-height: 18px;
     text-align: center;
-    background-color: @red;
+    background-color: var(--van-red);
     border-radius: 100px;
   }
 }
diff --git a/src/steps/demo/index.vue b/src/steps/demo/index.vue
index ec0787731..10cf87315 100644
--- a/src/steps/demo/index.vue
+++ b/src/steps/demo/index.vue
@@ -84,16 +84,14 @@ const nextStep = () => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-steps {
   .steps-success,
   .van-icon-location {
-    color: @green;
+    color: var(--van-green);
   }
 
   .van-button {
-    margin: @padding-md 0 0 @padding-md;
+    margin: var(--van-padding-md) 0 0 var(--van-padding-md);
   }
 
   p,
diff --git a/src/sticky/demo/index.vue b/src/sticky/demo/index.vue
index b6d529a1c..16a0534f8 100644
--- a/src/sticky/demo/index.vue
+++ b/src/sticky/demo/index.vue
@@ -57,13 +57,11 @@ const container = ref(null);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-sticky {
   height: 200vh;
 
   .van-button {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 }
 </style>
diff --git a/src/style/demo/index.vue b/src/style/demo/index.vue
index b8647cdfd..43b547267 100644
--- a/src/style/demo/index.vue
+++ b/src/style/demo/index.vue
@@ -62,24 +62,22 @@ const animate = (newName: string) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-style {
   .van-ellipsis,
   .van-multi-ellipsis--l2 {
     max-width: 300px;
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
     font-size: 14px;
     line-height: 18px;
   }
 
   .van-ellipsis {
-    margin-bottom: @padding-md;
+    margin-bottom: var(--van-padding-md);
   }
 
   .van-hairline--top {
     height: 30px;
-    background-color: @white;
+    background-color: var(--van-white);
 
     &::after {
       top: 5px;
@@ -93,7 +91,7 @@ const animate = (newName: string) => {
     width: 100px;
     height: 100px;
     margin: -50px 0 0 -50px;
-    background-color: @blue;
+    background-color: var(--van-blue);
     border-radius: 8px;
   }
 }
diff --git a/src/submit-bar/demo/index.vue b/src/submit-bar/demo/index.vue
index 31243b471..ed4352d2f 100644
--- a/src/submit-bar/demo/index.vue
+++ b/src/submit-bar/demo/index.vue
@@ -75,8 +75,6 @@ const onClickLink = () => Toast(t('clickLink'));
 Ï
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-submit-bar {
   .van-submit-bar {
     position: relative;
@@ -84,11 +82,11 @@ const onClickLink = () => Toast(t('clickLink'));
   }
 
   .edit-address {
-    color: @blue;
+    color: var(--van-blue);
   }
 
   .van-checkbox {
-    margin-right: @padding-sm;
+    margin-right: var(--van-padding-sm);
   }
 }
 </style>
diff --git a/src/swipe-cell/demo/index.vue b/src/swipe-cell/demo/index.vue
index 246ff6992..302762ecc 100644
--- a/src/swipe-cell/demo/index.vue
+++ b/src/swipe-cell/demo/index.vue
@@ -92,14 +92,12 @@ const beforeClose = ({ position }: { position: string }) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-swipe-cell {
   user-select: none;
 
   .van-card {
     margin: 0;
-    background-color: @white;
+    background-color: var(--van-white);
   }
 
   .delete-button {
diff --git a/src/swipe/demo/index.vue b/src/swipe/demo/index.vue
index d7e661d95..a46f75e02 100644
--- a/src/swipe/demo/index.vue
+++ b/src/swipe/demo/index.vue
@@ -97,14 +97,12 @@ const onChange = (index: number) => Toast(t('message') + index);
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-swipe {
   padding-bottom: 30px;
 
   .van-swipe {
     &-item {
-      color: @white;
+      color: var(--van-white);
       font-size: 20px;
       line-height: 150px;
       text-align: center;
@@ -124,7 +122,7 @@ const onChange = (index: number) => Toast(t('message') + index);
       width: 100%;
       height: 240px;
       padding: 30px 60px;
-      background-color: @white;
+      background-color: var(--van-white);
       pointer-events: none;
     }
   }
@@ -140,7 +138,7 @@ const onChange = (index: number) => Toast(t('message') + index);
     right: 5px;
     bottom: 5px;
     padding: 2px 5px;
-    color: @white;
+    color: var(--van-white);
     font-size: 12px;
     background: rgba(0, 0, 0, 0.1);
   }
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index ff409d558..ba344a400 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -80,11 +80,9 @@ const onUpdateValue = (checked: boolean) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-switch {
   .van-switch {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 }
 </style>
diff --git a/src/tab/demo/index.vue b/src/tab/demo/index.vue
index 4e44a2691..8f9febcff 100644
--- a/src/tab/demo/index.vue
+++ b/src/tab/demo/index.vue
@@ -162,8 +162,6 @@ const beforeChange = (name: number) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-tab {
   margin-bottom: 80vh;
 
@@ -174,7 +172,7 @@ const beforeChange = (name: number) => {
 
   .van-tab__pane {
     padding: 24px 20px;
-    background-color: @white;
+    background-color: var(--van-white);
   }
 
   .van-tabs--card .van-tab__pane {
diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue
index 95b58934a..862ea4e30 100644
--- a/src/tag/demo/index.vue
+++ b/src/tag/demo/index.vue
@@ -136,11 +136,9 @@ const close = () => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-tag {
   .van-tag + .van-tag {
-    margin-left: @padding-xs;
+    margin-left: var(--van-padding-xs);
   }
 }
 </style>
diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue
index d8252410f..ad37ee3d5 100644
--- a/src/uploader/demo/index.vue
+++ b/src/uploader/demo/index.vue
@@ -179,13 +179,11 @@ const onOversize = (file: UploaderFileListItem, detail: unknown) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-uploader {
-  background-color: @white;
+  background-color: var(--van-white);
 
   .van-uploader {
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
   }
 
   .preview-cover {