fix: missing import var

feat(style): component using basic css variables
feat(style): add basic css variables
2026-04-30 02:18:15 +08:00 · 2021-06-12 15:52:22 +08:00 · 2021-06-12 15:52:22 +08:00 · 2021-06-12 15:52:22 +08:00 · 2021-06-12 15:52:22 +08:00
140 changed files with 2476 additions and 1501 deletions
--- a/src/action-bar-button/index.less
+++ b/src/action-bar-button/index.less
@ -1,31 +1,37 @@
@import './var.less';

+:root {
+  --van-action-bar-button-height: @action-bar-button-height;
+  --van-action-bar-button-warning-color: @action-bar-button-warning-color;
+  --van-action-bar-button-danger-color: @action-bar-button-danger-color;
+}
+
 .van-action-bar-button {
  flex: 1;
-  height: @action-bar-button-height;
-  font-weight: @font-weight-bold;
-  font-size: @font-size-md;
+  height: var(--van-action-bar-button-height);
+  font-weight: var(--van-font-weight-bold);
+  font-size: var(--van-font-size-md);
  border: none;
  border-radius: 0;

  &--first {
    margin-left: 5px;
-    border-top-left-radius: @border-radius-max;
-    border-bottom-left-radius: @border-radius-max;
+    border-top-left-radius: var(--van-border-radius-max);
+    border-bottom-left-radius: var(--van-border-radius-max);
  }

  &--last {
    margin-right: 5px;
-    border-top-right-radius: @border-radius-max;
-    border-bottom-right-radius: @border-radius-max;
+    border-top-right-radius: var(--van-border-radius-max);
+    border-bottom-right-radius: var(--van-border-radius-max);
  }

  &--warning {
-    background: @action-bar-button-warning-color;
+    background: var(--van-action-bar-button-warning-color);
  }

  &--danger {
-    background: @action-bar-button-danger-color;
+    background: var(--van-action-bar-button-danger-color);
  }

  @media (max-width: 321px) {
--- a/src/action-bar-button/var.less
+++ b/src/action-bar-button/var.less
@ -1,5 +1,5 @@
@import '../style/var.less';

@action-bar-button-height: 40px;
-@action-bar-button-warning-color: @gradient-orange;
-@action-bar-button-danger-color: @gradient-red;
+@action-bar-button-warning-color: var(--van-gradient-orange);
+@action-bar-button-danger-color: var(--van-gradient-red);
--- a/src/action-bar-icon/index.less
+++ b/src/action-bar-icon/index.less
@ -1,25 +1,36 @@
@import './var.less';

+:root {
+  --van-action-bar-icon-width: @action-bar-icon-width;
+  --van-action-bar-icon-height: @action-bar-icon-height;
+  --van-action-bar-icon-color: @action-bar-icon-color;
+  --van-action-bar-icon-size: @action-bar-icon-size;
+  --van-action-bar-icon-font-size: @action-bar-icon-font-size;
+  --van-action-bar-icon-active-color: @action-bar-icon-active-color;
+  --van-action-bar-icon-text-color: @action-bar-icon-text-color;
+  --van-action-bar-icon-background-color: @action-bar-icon-background-color;
+}
+
 .van-action-bar-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
-  min-width: @action-bar-icon-width;
-  height: @action-bar-icon-height;
-  color: @action-bar-icon-text-color;
-  font-size: @action-bar-icon-font-size;
+  min-width: var(--van-action-bar-icon-width);
+  height: var(--van-action-bar-icon-height);
+  color: var(--van-action-bar-icon-text-color);
+  font-size: var(--van-action-bar-icon-font-size);
  line-height: 1;
  text-align: center;
-  background-color: @action-bar-icon-background-color;
+  background-color: var(--van-action-bar-icon-background-color);
  cursor: pointer;

  &:active {
-    background-color: @action-bar-icon-active-color;
+    background-color: var(--van-action-bar-icon-active-color);
  }

  &__icon {
-    margin: 0 auto @padding-base;
-    color: @action-bar-icon-color;
-    font-size: @action-bar-icon-size;
+    margin: 0 auto var(--van-padding-base);
+    color: var(--van-action-bar-icon-color);
+    font-size: var(--van-action-bar-icon-size);
  }
 }
--- a/src/action-bar-icon/var.less
+++ b/src/action-bar-icon/var.less
@ -2,9 +2,9 @@

@action-bar-icon-width: 48px;
@action-bar-icon-height: 100%;
-@action-bar-icon-color: @text-color;
+@action-bar-icon-color: var(--van-text-color);
@action-bar-icon-size: 18px;
-@action-bar-icon-font-size: @font-size-xs;
-@action-bar-icon-active-color: @active-color;
-@action-bar-icon-text-color: @gray-7;
-@action-bar-icon-background-color: @white;
+@action-bar-icon-font-size: var(--van-font-size-xs);
+@action-bar-icon-active-color: var(--van-active-color);
+@action-bar-icon-text-color: var(--van-gray-7);
+@action-bar-icon-background-color: var(--van-white);
--- a/src/action-bar/index.less
+++ b/src/action-bar/index.less
@ -1,6 +1,11 @@
@import './var.less';
@import '../style/mixins/safe-area.less';

+:root {
+  --van-action-bar-background-color: @action-bar-background-color;
+  --van-action-bar-height: @action-bar-height;
+}
+
 .van-action-bar {
  position: fixed;
  right: 0;
@ -9,8 +14,8 @@
  display: flex;
  align-items: center;
  box-sizing: content-box;
-  height: @action-bar-height;
-  background-color: @action-bar-background-color;
+  height: var(--van-action-bar-height);
+  background-color: var(--van-action-bar-background-color);
  .safe-area-inset-bottom();

  &--unfit {
--- a/src/action-bar/var.less
+++ b/src/action-bar/var.less
@ -1,4 +1,4 @@
@import '../style/var.less';

-@action-bar-background-color: @white;
+@action-bar-background-color: var(--van-white);
@action-bar-height: 50px;
--- a/src/action-sheet/index.less
+++ b/src/action-sheet/index.less
@ -1,12 +1,37 @@
@import './var.less';
@import '../style/mixins/hairline';

+:root {
+  --van-action-sheet-max-height: @action-sheet-max-height;
+  --van-action-sheet-header-height: @action-sheet-header-height;
+  --van-action-sheet-header-font-size: @action-sheet-header-font-size;
+  --van-action-sheet-description-color: @action-sheet-description-color;
+  --van-action-sheet-description-font-size: @action-sheet-description-font-size;
+  --van-action-sheet-description-line-height: @action-sheet-description-line-height;
+  --van-action-sheet-item-background: @action-sheet-item-background;
+  --van-action-sheet-item-font-size: @action-sheet-item-font-size;
+  --van-action-sheet-item-line-height: @action-sheet-item-line-height;
+  --van-action-sheet-item-text-color: @action-sheet-item-text-color;
+  --van-action-sheet-item-disabled-text-color: @action-sheet-item-disabled-text-color;
+  --van-action-sheet-subname-color: @action-sheet-subname-color;
+  --van-action-sheet-subname-font-size: @action-sheet-subname-font-size;
+  --van-action-sheet-subname-line-height: @action-sheet-subname-line-height;
+  --van-action-sheet-close-icon-size: @action-sheet-close-icon-size;
+  --van-action-sheet-close-icon-color: @action-sheet-close-icon-color;
+  --van-action-sheet-close-icon-active-color: @action-sheet-close-icon-active-color;
+  --van-action-sheet-close-icon-padding: @action-sheet-close-icon-padding;
+  --van-action-sheet-cancel-text-color: @action-sheet-cancel-text-color;
+  --van-action-sheet-cancel-padding-top: @action-sheet-cancel-padding-top;
+  --van-action-sheet-cancel-padding-color: @action-sheet-cancel-padding-color;
+  --van-action-sheet-loading-icon-size: @action-sheet-loading-icon-size;
+}
+
 .van-action-sheet {
  display: flex;
  flex-direction: column;
-  max-height: @action-sheet-max-height;
+  max-height: var(--van-action-sheet-max-height);
  overflow: hidden;
-  color: @action-sheet-item-text-color;
+  color: var(--van-action-sheet-item-text-color);

  &__content {
    flex: 1 auto;
@ -18,26 +43,26 @@
  &__cancel {
    display: block;
    width: 100%;
-    padding: 14px @padding-md;
-    font-size: @action-sheet-item-font-size;
-    background-color: @action-sheet-item-background;
+    padding: 14px var(--van-padding-md);
+    font-size: var(--van-action-sheet-item-font-size);
+    background-color: var(--van-action-sheet-item-background);
    border: none;
    cursor: pointer;

    &:active {
-      background-color: @active-color;
+      background-color: var(--van-active-color);
    }
  }

  &__item {
-    line-height: @action-sheet-item-line-height;
+    line-height: var(--van-action-sheet-item-line-height);

    &--loading,
    &--disabled {
-      color: @action-sheet-item-disabled-text-color;
+      color: var(--van-action-sheet-item-disabled-text-color);

      &:active {
-        background-color: @action-sheet-item-background;
+        background-color: var(--van-action-sheet-item-background);
      }
    }

@ -53,60 +78,60 @@
  &__cancel {
    flex-shrink: 0;
    box-sizing: border-box;
-    color: @action-sheet-cancel-text-color;
+    color: var(--van-action-sheet-cancel-text-color);
  }

  &__subname {
-    margin-top: @padding-xs;
-    color: @action-sheet-subname-color;
-    font-size: @action-sheet-subname-font-size;
-    line-height: @action-sheet-subname-line-height;
+    margin-top: var(--van-padding-xs);
+    color: var(--van-action-sheet-subname-color);
+    font-size: var(--van-action-sheet-subname-font-size);
+    line-height: var(--van-action-sheet-subname-line-height);
  }

  &__gap {
    display: block;
-    height: @action-sheet-cancel-padding-top;
-    background-color: @action-sheet-cancel-padding-color;
+    height: var(--van-action-sheet-cancel-padding-top);
+    background-color: var(--van-action-sheet-cancel-padding-color);
  }

  &__header {
    flex-shrink: 0;
-    font-weight: @font-weight-bold;
-    font-size: @action-sheet-header-font-size;
-    line-height: @action-sheet-header-height;
+    font-weight: var(--van-font-weight-bold);
+    font-size: var(--van-action-sheet-header-font-size);
+    line-height: var(--van-action-sheet-header-height);
    text-align: center;
  }

  &__description {
    position: relative;
    flex-shrink: 0;
-    padding: 20px @padding-md;
-    color: @action-sheet-description-color;
-    font-size: @action-sheet-description-font-size;
-    line-height: @action-sheet-description-line-height;
+    padding: 20px var(--van-padding-md);
+    color: var(--van-action-sheet-description-color);
+    font-size: var(--van-action-sheet-description-font-size);
+    line-height: var(--van-action-sheet-description-line-height);
    text-align: center;

    &::after {
-      .hairline-bottom(@border-color, @padding-md, @padding-md);
+      .hairline-bottom(var(--van-border-color), var(--van-padding-md), var(--van-padding-md));
    }
  }

  &__loading-icon .van-loading__spinner {
-    width: @action-sheet-loading-icon-size;
-    height: @action-sheet-loading-icon-size;
+    width: var(--van-action-sheet-loading-icon-size);
+    height: var(--van-action-sheet-loading-icon-size);
  }

  &__close {
    position: absolute;
    top: 0;
    right: 0;
-    padding: @action-sheet-close-icon-padding;
-    color: @action-sheet-close-icon-color;
-    font-size: @action-sheet-close-icon-size;
+    padding: var(--van-action-sheet-close-icon-padding);
+    color: var(--van-action-sheet-close-icon-color);
+    font-size: var(--van-action-sheet-close-icon-size);
    line-height: inherit;

    &:active {
-      color: @action-sheet-close-icon-active-color;
+      color: var(--van-action-sheet-close-icon-active-color);
    }
  }
 }
--- a/src/action-sheet/var.less
+++ b/src/action-sheet/var.less
@ -2,23 +2,23 @@

@action-sheet-max-height: 80%;
@action-sheet-header-height: 48px;
-@action-sheet-header-font-size: @font-size-lg;
-@action-sheet-description-color: @gray-6;
-@action-sheet-description-font-size: @font-size-md;
-@action-sheet-description-line-height: @line-height-md;
-@action-sheet-item-background: @white;
-@action-sheet-item-font-size: @font-size-lg;
-@action-sheet-item-line-height: @line-height-lg;
-@action-sheet-item-text-color: @text-color;
-@action-sheet-item-disabled-text-color: @gray-5;
-@action-sheet-subname-color: @gray-6;
-@action-sheet-subname-font-size: @font-size-sm;
-@action-sheet-subname-line-height: @line-height-sm;
+@action-sheet-header-font-size: var(--van-font-size-lg);
+@action-sheet-description-color: var(--van-gray-6);
+@action-sheet-description-font-size: var(--van-font-size-md);
+@action-sheet-description-line-height: var(--van-line-height-md);
+@action-sheet-item-background: var(--van-white);
+@action-sheet-item-font-size: var(--van-font-size-lg);
+@action-sheet-item-line-height: var(--van-line-height-lg);
+@action-sheet-item-text-color: var(--van-text-color);
+@action-sheet-item-disabled-text-color: var(--van-gray-5);
+@action-sheet-subname-color: var(--van-gray-6);
+@action-sheet-subname-font-size: var(--van-font-size-sm);
+@action-sheet-subname-line-height: var(--van-line-height-sm);
@action-sheet-close-icon-size: 22px;
-@action-sheet-close-icon-color: @gray-5;
-@action-sheet-close-icon-active-color: @gray-6;
-@action-sheet-close-icon-padding: 0 @padding-md;
-@action-sheet-cancel-text-color: @gray-7;
-@action-sheet-cancel-padding-top: @padding-xs;
-@action-sheet-cancel-padding-color: @background-color;
+@action-sheet-close-icon-color: var(--van-gray-5);
+@action-sheet-close-icon-active-color: var(--van-gray-6);
+@action-sheet-close-icon-padding: 0 var(--van-padding-md);
+@action-sheet-cancel-text-color: var(--van-gray-7);
+@action-sheet-cancel-padding-top: var(--van-padding-xs);
+@action-sheet-cancel-padding-color: var(--van-background-color);
@action-sheet-loading-icon-size: 22px;
--- a/src/address-edit/index.less
+++ b/src/address-edit/index.less
@ -1,11 +1,19 @@
@import './var.less';

+:root {
+  --van-address-edit-padding: @address-edit-padding;
+  --van-address-edit-buttons-padding: @address-edit-buttons-padding;
+  --van-address-edit-button-margin-bottom: @address-edit-button-margin-bottom;
+  --van-address-edit-detail-finish-color: @address-edit-detail-finish-color;
+  --van-address-edit-detail-finish-font-size: @address-edit-detail-finish-font-size;
+}
+
 .van-address-edit {
-  padding: @address-edit-padding;
+  padding: var(--van-address-edit-padding);

  &__fields {
    overflow: hidden;
-    border-radius: @padding-xs;
+    border-radius: var(--van-padding-xs);

    .van-field__label {
      width: 4.1em;
@ -13,31 +21,31 @@
  }

  &__default {
-    margin-top: @padding-sm;
+    margin-top: var(--van-padding-sm);
    overflow: hidden;
-    border-radius: @padding-xs;
+    border-radius: var(--van-padding-xs);
  }

  &__buttons {
-    padding: @address-edit-buttons-padding;
+    padding: var(--van-address-edit-buttons-padding);

    .van-button {
-      margin-bottom: @address-edit-button-margin-bottom;
+      margin-bottom: var(--van-address-edit-button-margin-bottom);
    }
  }

  &-detail {
    &__search-item {
-      background-color: @gray-2;
+      background-color: var(--van-gray-2);
    }

    &__keyword {
-      color: @red;
+      color: var(--van-red);
    }

    &__finish {
-      color: @address-edit-detail-finish-color;
-      font-size: @address-edit-detail-finish-font-size;
+      color: var(--van-address-edit-detail-finish-color);
+      font-size: var(--van-address-edit-detail-finish-font-size);
    }
  }
 }
--- a/src/address-edit/var.less
+++ b/src/address-edit/var.less
@ -1,7 +1,7 @@
@import '../style/var.less';

-@address-edit-padding: @padding-sm;
-@address-edit-buttons-padding: @padding-xl @padding-base;
-@address-edit-button-margin-bottom: @padding-sm;
-@address-edit-detail-finish-color: @blue;
-@address-edit-detail-finish-font-size: @font-size-sm;
+@address-edit-padding: var(--van-padding-sm);
+@address-edit-buttons-padding: var(--van-padding-xl) var(--van-padding-base);
+@address-edit-button-margin-bottom: var(--van-padding-sm);
+@address-edit-detail-finish-color: var(--van-blue);
+@address-edit-detail-finish-font-size: var(--van-font-size-sm);
--- a/src/address-list/index.less
+++ b/src/address-list/index.less
@ -1,20 +1,36 @@
@import './var.less';
@import '../style/mixins/safe-area.less';

+:root {
+  --van-address-list-padding: @address-list-padding;
+  --van-address-list-disabled-text-color: @address-list-disabled-text-color;
+  --van-address-list-disabled-text-padding: @address-list-disabled-text-padding;
+  --van-address-list-disabled-text-font-size: @address-list-disabled-text-font-size;
+  --van-address-list-disabled-text-line-height: @address-list-disabled-text-line-height;
+  --van-address-list-add-button-z-index: @address-list-add-button-z-index;
+  --van-address-list-item-padding: @address-list-item-padding;
+  --van-address-list-item-text-color: @address-list-item-text-color;
+  --van-address-list-item-disabled-text-color: @address-list-item-disabled-text-color;
+  --van-address-list-item-font-size: @address-list-item-font-size;
+  --van-address-list-item-line-height: @address-list-item-line-height;
+  --van-address-list-item-radio-icon-color: @address-list-item-radio-icon-color;
+  --van-address-list-edit-icon-size: @address-list-edit-icon-size;
+}
+
 .van-address-list {
  box-sizing: border-box;
  height: 100%;
-  padding: @address-list-padding;
+  padding: var(--van-address-list-padding);

  &__bottom {
    position: fixed;
    bottom: 0;
    left: 0;
-    z-index: @address-list-add-button-z-index;
+    z-index: var(--van-address-list-add-button-z-index);
    box-sizing: border-box;
    width: 100%;
-    padding: 0 @padding-md;
-    background-color: @white;
+    padding: 0 var(--van-padding-md);
+    background-color: var(--van-white);
    .safe-area-inset-bottom();
  }

@ -24,20 +40,20 @@
  }

  &__disabled-text {
-    padding: @address-list-disabled-text-padding;
-    color: @address-list-disabled-text-color;
-    font-size: @address-list-disabled-text-font-size;
-    line-height: @address-list-disabled-text-line-height;
+    padding: var(--van-address-list-disabled-text-padding);
+    color: var(--van-address-list-disabled-text-color);
+    font-size: var(--van-address-list-disabled-text-font-size);
+    line-height: var(--van-address-list-disabled-text-line-height);
  }
 }

 .van-address-item {
-  padding: @address-list-item-padding;
-  background-color: @white;
-  border-radius: @border-radius-lg;
+  padding: var(--van-address-list-item-padding);
+  background-color: var(--van-white);
+  border-radius: var(--van-border-radius-lg);

  &:not(:last-child) {
-    margin-bottom: @padding-sm;
+    margin-bottom: var(--van-padding-sm);
  }

  &__value {
@ -47,38 +63,38 @@
  &__name {
    display: flex;
    align-items: center;
-    margin-bottom: @padding-xs;
-    font-size: @font-size-lg;
-    line-height: @line-height-lg;
+    margin-bottom: var(--van-padding-xs);
+    font-size: var(--van-font-size-lg);
+    line-height: var(--van-line-height-lg);
  }

  &__tag {
    flex: none;
-    margin-left: @padding-xs;
+    margin-left: var(--van-padding-xs);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.4em;
  }

  &__address {
-    color: @address-list-item-text-color;
-    font-size: @address-list-item-font-size;
-    line-height: @address-list-item-line-height;
+    color: var(--van-address-list-item-text-color);
+    font-size: var(--van-address-list-item-font-size);
+    line-height: var(--van-address-list-item-line-height);
  }

  &--disabled {
    .van-address-item__name,
    .van-address-item__address {
-      color: @address-list-item-disabled-text-color;
+      color: var(--van-address-list-item-disabled-text-color);
    }
  }

  &__edit {
    position: absolute;
    top: 50%;
-    right: @padding-md;
-    color: @gray-6;
-    font-size: @address-list-edit-icon-size;
+    right: var(--van-padding-md);
+    color: var(--van-gray-6);
+    font-size: var(--van-address-list-edit-icon-size);
    transform: translate(0, -50%);
  }

@ -87,11 +103,11 @@
  }

  .van-radio__label {
-    margin-left: @padding-sm;
+    margin-left: var(--van-padding-sm);
  }

  .van-radio__icon--checked .van-icon {
-    background-color: @address-list-item-radio-icon-color;
-    border-color: @address-list-item-radio-icon-color;
+    background-color: var(--van-address-list-item-radio-icon-color);
+    border-color: var(--van-address-list-item-radio-icon-color);
  }
 }
--- a/src/address-list/var.less
+++ b/src/address-list/var.less
@ -1,15 +1,16 @@
@import '../style/var.less';

-@address-list-padding: @padding-sm @padding-sm 80px;
-@address-list-disabled-text-color: @gray-6;
-@address-list-disabled-text-padding: @padding-base * 5 0 @padding-md;
-@address-list-disabled-text-font-size: @font-size-md;
-@address-list-disabled-text-line-height: @line-height-md;
+@address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
+@address-list-disabled-text-color: var(--van-gray-6);
+@address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0
+  var(--van-padding-md);
+@address-list-disabled-text-font-size: var(--van-font-size-md);
+@address-list-disabled-text-line-height: var(--van-line-height-md);
@address-list-add-button-z-index: 999;
-@address-list-item-padding: @padding-sm;
-@address-list-item-text-color: @text-color;
-@address-list-item-disabled-text-color: @gray-5;
+@address-list-item-padding: var(--van-padding-sm);
+@address-list-item-text-color: var(--van-text-color);
+@address-list-item-disabled-text-color: var(--van-gray-5);
@address-list-item-font-size: 13px;
-@address-list-item-line-height: @line-height-sm;
-@address-list-item-radio-icon-color: @red;
+@address-list-item-line-height: var(--van-line-height-sm);
+@address-list-item-radio-icon-color: var(--van-red);
@address-list-edit-icon-size: 20px;
--- a/src/badge/index.less
+++ b/src/badge/index.less
@ -1,19 +1,32 @@
@import './var.less';

+:root {
+  --van-badge-size: @badge-size;
+  --van-badge-color: @badge-color;
+  --van-badge-padding: @badge-padding;
+  --van-badge-font-size: @badge-font-size;
+  --van-badge-font-weight: @badge-font-weight;
+  --van-badge-border-width: @badge-border-width;
+  --van-badge-background-color: @badge-background-color;
+  --van-badge-dot-color: @badge-dot-color;
+  --van-badge-dot-size: @badge-dot-size;
+  --van-badge-font-family: @badge-font-family;
+}
+
 .van-badge {
  display: inline-block;
  box-sizing: border-box;
-  min-width: @badge-size;
-  padding: @badge-padding;
-  color: @badge-color;
-  font-weight: @badge-font-weight;
-  font-size: @badge-font-size;
-  font-family: @badge-font-family;
+  min-width: var(--van-badge-size);
+  padding: var(--van-badge-padding);
+  color: var(--van-badge-color);
+  font-weight: var(--van-badge-font-weight);
+  font-size: var(--van-badge-font-size);
+  font-family: var(--van-badge-font-family);
  line-height: 1.2;
  text-align: center;
-  background-color: @badge-background-color;
-  border: @badge-border-width solid @white;
-  border-radius: @border-radius-max;
+  background-color: var(--van-badge-background-color);
+  border: var(--van-badge-border-width) solid var(--van-white);
+  border-radius: var(--van-border-radius-max);

  &--fixed {
    position: absolute;
@ -24,10 +37,10 @@
  }

  &--dot {
-    width: @badge-dot-size;
+    width: var(--van-badge-dot-size);
    min-width: 0;
-    height: @badge-dot-size;
-    background-color: @badge-dot-color;
+    height: var(--van-badge-dot-size);
+    background-color: var(--van-badge-dot-color);
    border-radius: 100%;
  }

--- a/src/badge/var.less
+++ b/src/badge/var.less
@ -1,12 +1,12 @@
@import '../style/var.less';

@badge-size: 16px;
-@badge-color: @white;
+@badge-color: var(--van-white);
@badge-padding: 0 3px;
-@badge-font-size: @font-size-sm;
-@badge-font-weight: @font-weight-bold;
-@badge-border-width: @border-width-base;
-@badge-background-color: @red;
-@badge-dot-color: @red;
+@badge-font-size: var(--van-font-size-sm);
+@badge-font-weight: var(--van-font-weight-bold);
+@badge-border-width: var(--van-border-width-base);
+@badge-background-color: var(--van-red);
+@badge-dot-color: var(--van-red);
@badge-dot-size: 8px;
@badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
--- a/src/button/index.less
+++ b/src/button/index.less
@ -1,18 +1,55 @@
@import './var.less';

+:root {
+  --van-button-mini-height: @button-mini-height;
+  --van-button-mini-padding: @button-mini-padding;
+  --van-button-mini-font-size: @button-mini-font-size;
+  --van-button-small-height: @button-small-height;
+  --van-button-small-padding: @button-small-padding;
+  --van-button-small-font-size: @button-small-font-size;
+  --van-button-normal-padding: @button-normal-padding;
+  --van-button-normal-font-size: @button-normal-font-size;
+  --van-button-large-height: @button-large-height;
+  --van-button-default-height: @button-default-height;
+  --van-button-default-line-height: @button-default-line-height;
+  --van-button-default-font-size: @button-default-font-size;
+  --van-button-default-color: @button-default-color;
+  --van-button-default-background-color: @button-default-background-color;
+  --van-button-default-border-color: @button-default-border-color;
+  --van-button-primary-color: @button-primary-color;
+  --van-button-primary-background-color: @button-primary-background-color;
+  --van-button-primary-border-color: @button-primary-border-color;
+  --van-button-success-color: @button-success-color;
+  --van-button-success-background-color: @button-success-background-color;
+  --van-button-success-border-color: @button-success-border-color;
+  --van-button-danger-color: @button-danger-color;
+  --van-button-danger-background-color: @button-danger-background-color;
+  --van-button-danger-border-color: @button-danger-border-color;
+  --van-button-warning-color: @button-warning-color;
+  --van-button-warning-background-color: @button-warning-background-color;
+  --van-button-warning-border-color: @button-warning-border-color;
+  --van-button-border-width: @button-border-width;
+  --van-button-border-radius: @button-border-radius;
+  --van-button-round-border-radius: @button-round-border-radius;
+  --van-button-plain-background-color: @button-plain-background-color;
+  --van-button-disabled-opacity: @button-disabled-opacity;
+  --van-button-icon-size: @button-icon-size;
+  --van-button-loading-icon-size: @button-loading-icon-size;
+}
+
 .van-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
-  height: @button-default-height;
+  height: var(--van-button-default-height);
  margin: 0;
  padding: 0;
-  font-size: @button-default-font-size;
-  line-height: @button-default-line-height;
+  font-size: var(--van-button-default-font-size);
+  line-height: var(--van-button-default-line-height);
  text-align: center;
-  border-radius: @button-border-radius;
+  border-radius: var(--van-button-border-radius);
  cursor: pointer;
-  transition: opacity @animation-duration-fast;
+  transition: opacity var(--van-animation-duration-fast);
  -webkit-appearance: none;

  &::before {
@ -21,9 +58,9 @@
    left: 50%;
    width: 100%;
    height: 100%;
-    background-color: @black;
+    background-color: var(--van-black);
    border: inherit;
-    border-color: @black;
+    border-color: var(--van-black);
    border-radius: inherit; /* inherit parent's border radius */
    transform: translate(-50%, -50%);
    opacity: 0;
@ -42,69 +79,74 @@
  }

  &--default {
-    color: @button-default-color;
-    background-color: @button-default-background-color;
-    border: @button-border-width solid @button-default-border-color;
+    color: var(--van-button-default-color);
+    background-color: var(--van-button-default-background-color);
+    border: var(--van-button-border-width) solid
+      var(--van-button-default-border-color);
  }

  &--primary {
-    color: @button-primary-color;
-    background-color: @button-primary-background-color;
-    border: @button-border-width solid @button-primary-border-color;
+    color: var(--van-button-primary-color);
+    background-color: var(--van-button-primary-background-color);
+    border: var(--van-button-border-width) solid
+      var(--van-button-primary-border-color);
  }

  &--success {
-    color: @button-success-color;
-    background-color: @button-success-background-color;
-    border: @button-border-width solid @button-success-border-color;
+    color: var(--van-button-success-color);
+    background-color: var(--van-button-success-background-color);
+    border: var(--van-button-border-width) solid
+      var(--van-button-success-border-color);
  }

  &--danger {
-    color: @button-danger-color;
-    background-color: @button-danger-background-color;
-    border: @button-border-width solid @button-danger-border-color;
+    color: var(--van-button-danger-color);
+    background-color: var(--van-button-danger-background-color);
+    border: var(--van-button-border-width) solid
+      var(--van-button-danger-border-color);
  }

  &--warning {
-    color: @button-warning-color;
-    background-color: @button-warning-background-color;
-    border: @button-border-width solid @button-warning-border-color;
+    color: var(--van-button-warning-color);
+    background-color: var(--van-button-warning-background-color);
+    border: var(--van-button-border-width) solid
+      var(--van-button-warning-border-color);
  }

  &--plain {
-    background-color: @button-plain-background-color;
+    background-color: var(--van-button-plain-background-color);

    &.van-button--primary {
-      color: @button-primary-background-color;
+      color: var(--van-button-primary-background-color);
    }

    &.van-button--success {
-      color: @button-success-background-color;
+      color: var(--van-button-success-background-color);
    }

    &.van-button--danger {
-      color: @button-danger-background-color;
+      color: var(--van-button-danger-background-color);
    }

    &.van-button--warning {
-      color: @button-warning-background-color;
+      color: var(--van-button-warning-background-color);
    }
  }

  &--large {
    width: 100%;
-    height: @button-large-height;
+    height: var(--van-button-large-height);
  }

  &--normal {
-    padding: @button-normal-padding;
-    font-size: @button-normal-font-size;
+    padding: var(--van-button-normal-padding);
+    font-size: var(--van-button-normal-font-size);
  }

  &--small {
-    height: @button-small-height;
-    padding: @button-small-padding;
-    font-size: @button-small-font-size;
+    height: var(--van-button-small-height);
+    padding: var(--van-button-small-padding);
+    font-size: var(--van-button-small-font-size);
  }

  &__loading {
@ -113,18 +155,18 @@

    .van-loading__spinner {
      color: currentColor;
-      width: @button-loading-icon-size;
-      height: @button-loading-icon-size;
+      width: var(--van-button-loading-icon-size);
+      height: var(--van-button-loading-icon-size);
    }
  }

  &--mini {
-    height: @button-mini-height;
-    padding: @button-mini-padding;
-    font-size: @button-mini-font-size;
+    height: var(--van-button-mini-height);
+    padding: var(--van-button-mini-padding);
+    font-size: var(--van-button-mini-font-size);

    & + .van-button--mini {
-      margin-left: @padding-base;
+      margin-left: var(--van-padding-base);
    }
  }

@ -135,7 +177,7 @@

  &--disabled {
    cursor: not-allowed;
-    opacity: @button-disabled-opacity;
+    opacity: var(--van-button-disabled-opacity);
  }

  &--loading {
@ -143,7 +185,7 @@
  }

  &--round {
-    border-radius: @button-round-border-radius;
+    border-radius: var(--van-button-round-border-radius);
  }

  &--square {
@ -166,7 +208,7 @@
  }

  &__icon {
-    font-size: @button-icon-size;
+    font-size: var(--van-button-icon-size);
    line-height: inherit;
  }

@ -174,7 +216,7 @@
  &__loading + &__text,
  &__text + &__icon,
  &__text + &__loading {
-    margin-left: @padding-base;
+    margin-left: var(--van-padding-base);
  }

  &--hairline {
@ -182,11 +224,11 @@

    &::after {
      border-color: inherit;
-      border-radius: @button-border-radius * 2;
+      border-radius: calc(var(--van-button-border-radius) * 2);
    }

    &.van-button--round::after {
-      border-radius: @button-round-border-radius;
+      border-radius: var(--van-button-round-border-radius);
    }

    &.van-button--square::after {
--- a/src/button/var.less
+++ b/src/button/var.less
@ -1,36 +1,36 @@
@import '../style/var.less';

@button-mini-height: 24px;
-@button-mini-padding: 0 @padding-base;
-@button-mini-font-size: @font-size-xs;
+@button-mini-padding: 0 var(--van-padding-base);
+@button-mini-font-size: var(--van-font-size-xs);
@button-small-height: 32px;
-@button-small-padding: 0 @padding-xs;
-@button-small-font-size: @font-size-sm;
+@button-small-padding: 0 var(--van-padding-xs);
+@button-small-font-size: var(--van-font-size-sm);
@button-normal-padding: 0 15px;
-@button-normal-font-size: @font-size-md;
+@button-normal-font-size: var(--van-font-size-md);
@button-large-height: 50px;
@button-default-height: 44px;
@button-default-line-height: 1.2;
-@button-default-font-size: @font-size-lg;
-@button-default-color: @text-color;
-@button-default-background-color: @white;
-@button-default-border-color: @border-color;
-@button-primary-color: @white;
-@button-primary-background-color: @blue;
-@button-primary-border-color: @blue;
-@button-success-color: @white;
-@button-success-background-color: @green;
-@button-success-border-color: @green;
-@button-danger-color: @white;
-@button-danger-background-color: @red;
-@button-danger-border-color: @red;
-@button-warning-color: @white;
-@button-warning-background-color: @orange;
-@button-warning-border-color: @orange;
-@button-border-width: @border-width-base;
-@button-border-radius: @border-radius-sm;
-@button-round-border-radius: @border-radius-max;
-@button-plain-background-color: @white;
-@button-disabled-opacity: @disabled-opacity;
+@button-default-font-size: var(--van-font-size-lg);
+@button-default-color: var(--van-text-color);
+@button-default-background-color: var(--van-white);
+@button-default-border-color: var(--van-border-color);
+@button-primary-color: var(--van-white);
+@button-primary-background-color: var(--van-blue);
+@button-primary-border-color: var(--van-blue);
+@button-success-color: var(--van-white);
+@button-success-background-color: var(--van-green);
+@button-success-border-color: var(--van-green);
+@button-danger-color: var(--van-white);
+@button-danger-background-color: var(--van-red);
+@button-danger-border-color: var(--van-red);
+@button-warning-color: var(--van-white);
+@button-warning-background-color: var(--van-orange);
+@button-warning-border-color: var(--van-orange);
+@button-border-width: var(--van-border-width-base);
+@button-border-radius: var(--van-border-radius-sm);
+@button-round-border-radius: var(--van-border-radius-max);
+@button-plain-background-color: var(--van-white);
+@button-disabled-opacity: var(--van-disabled-opacity);
@button-icon-size: 1.2em;
@button-loading-icon-size: 20px;
--- a/src/calendar/index.less
+++ b/src/calendar/index.less
@ -1,16 +1,44 @@
@import './var.less';
@import '../style/mixins/safe-area.less';

+:root {
+  --van-calendar-background-color: @calendar-background-color;
+  --van-calendar-popup-height: @calendar-popup-height;
+  --van-calendar-header-box-shadow: @calendar-header-box-shadow;
+  --van-calendar-header-title-height: @calendar-header-title-height;
+  --van-calendar-header-title-font-size: @calendar-header-title-font-size;
+  --van-calendar-header-subtitle-font-size: @calendar-header-subtitle-font-size;
+  --van-calendar-weekdays-height: @calendar-weekdays-height;
+  --van-calendar-weekdays-font-size: @calendar-weekdays-font-size;
+  --van-calendar-month-title-font-size: @calendar-month-title-font-size;
+  --van-calendar-month-mark-color: @calendar-month-mark-color;
+  --van-calendar-month-mark-font-size: @calendar-month-mark-font-size;
+  --van-calendar-day-height: @calendar-day-height;
+  --van-calendar-day-font-size: @calendar-day-font-size;
+  --van-calendar-range-edge-color: @calendar-range-edge-color;
+  --van-calendar-range-edge-background-color: @calendar-range-edge-background-color;
+  --van-calendar-range-middle-color: @calendar-range-middle-color;
+  --van-calendar-range-middle-background-opacity: @calendar-range-middle-background-opacity;
+  --van-calendar-selected-day-size: @calendar-selected-day-size;
+  --van-calendar-selected-day-color: @calendar-selected-day-color;
+  --van-calendar-info-font-size: @calendar-info-font-size;
+  --van-calendar-info-line-height: @calendar-info-line-height;
+  --van-calendar-selected-day-background-color: @calendar-selected-day-background-color;
+  --van-calendar-day-disabled-color: @calendar-day-disabled-color;
+  --van-calendar-confirm-button-height: @calendar-confirm-button-height;
+  --van-calendar-confirm-button-margin: @calendar-confirm-button-margin;
+}
+
 .van-calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
-  background-color: @calendar-background-color;
+  background-color: var(--van-calendar-background-color);

  &__popup {
    &.van-popup--top,
    &.van-popup--bottom {
-      height: @calendar-popup-height;
+      height: var(--van-calendar-popup-height);
    }

    &.van-popup--left,
@ -25,28 +53,28 @@

  &__header {
    flex-shrink: 0;
-    box-shadow: @calendar-header-box-shadow;
+    box-shadow: var(--van-calendar-header-box-shadow);
  }

  &__month-title,
  &__header-title,
  &__header-subtitle {
-    height: @calendar-header-title-height;
-    font-weight: @font-weight-bold;
-    line-height: @calendar-header-title-height;
+    height: var(--van-calendar-header-title-height);
+    font-weight: var(--van-font-weight-bold);
+    line-height: var(--van-calendar-header-title-height);
    text-align: center;
  }

  &__header-title {
-    font-size: @calendar-header-title-font-size;
+    font-size: var(--van-calendar-header-title-font-size);
  }

  &__header-subtitle {
-    font-size: @calendar-header-subtitle-font-size;
+    font-size: var(--van-calendar-header-subtitle-font-size);
  }

  &__month-title {
-    font-size: @calendar-month-title-font-size;
+    font-size: var(--van-calendar-month-title-font-size);
  }

  &__weekdays {
@ -55,8 +83,8 @@

  &__weekday {
    flex: 1;
-    font-size: @calendar-weekdays-font-size;
-    line-height: @calendar-weekdays-height;
+    font-size: var(--van-calendar-weekdays-font-size);
+    line-height: var(--van-calendar-weekdays-height);
    text-align: center;
  }

@ -78,8 +106,8 @@
    top: 50%;
    left: 50%;
    z-index: 0;
-    color: @calendar-month-mark-color;
-    font-size: @calendar-month-mark-font-size;
+    color: var(--van-calendar-month-mark-color);
+    font-size: var(--van-calendar-month-mark-font-size);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
@ -95,8 +123,8 @@
  &__day {
    position: relative;
    width: 14.285%;
-    height: @calendar-day-height;
-    font-size: @calendar-day-font-size;
+    height: var(--van-calendar-day-height);
+    font-size: var(--van-calendar-day-font-size);
    cursor: pointer;

    &--end,
@ -104,25 +132,25 @@
    &--start-end,
    &--multiple-middle,
    &--multiple-selected {
-      color: @calendar-range-edge-color;
-      background-color: @calendar-range-edge-background-color;
+      color: var(--van-calendar-range-edge-color);
+      background-color: var(--van-calendar-range-edge-background-color);
    }

    &--start {
-      border-radius: @border-radius-md 0 0 @border-radius-md;
+      border-radius: var(--van-border-radius-md) 0 0 var(--van-border-radius-md);
    }

    &--end {
-      border-radius: 0 @border-radius-md @border-radius-md 0;
+      border-radius: 0 var(--van-border-radius-md) var(--van-border-radius-md) 0;
    }

    &--start-end,
    &--multiple-selected {
-      border-radius: @border-radius-md;
+      border-radius: var(--van-border-radius-md);
    }

    &--middle {
-      color: @calendar-range-middle-color;
+      color: var(--van-calendar-range-middle-color);

      &::after {
        position: absolute;
@ -131,13 +159,13 @@
        bottom: 0;
        left: 0;
        background-color: currentColor;
-        opacity: @calendar-range-middle-background-opacity;
+        opacity: var(--van-calendar-range-middle-background-opacity);
        content: '';
      }
    }

    &--disabled {
-      color: @calendar-day-disabled-color;
+      color: var(--van-calendar-day-disabled-color);
      cursor: default;
    }
  }
@ -147,8 +175,8 @@
    position: absolute;
    right: 0;
    left: 0;
-    font-size: @calendar-info-font-size;
-    line-height: @calendar-info-line-height;
+    font-size: var(--van-calendar-info-font-size);
+    line-height: var(--van-calendar-info-line-height);

    @media (max-width: 350px) {
      font-size: 9px;
@ -164,16 +192,16 @@
  }

  &__selected-day {
-    width: @calendar-selected-day-size;
-    height: @calendar-selected-day-size;
-    color: @calendar-selected-day-color;
-    background-color: @calendar-selected-day-background-color;
-    border-radius: @border-radius-md;
+    width: var(--van-calendar-selected-day-size);
+    height: var(--van-calendar-selected-day-size);
+    color: var(--van-calendar-selected-day-color);
+    background-color: var(--van-calendar-selected-day-background-color);
+    border-radius: var(--van-border-radius-md);
  }

  &__footer {
    flex-shrink: 0;
-    padding: 0 @padding-md;
+    padding: 0 var(--van-padding-md);
    .safe-area-inset-bottom();

    &--unfit {
@ -182,7 +210,7 @@
  }

  &__confirm {
-    height: @calendar-confirm-button-height;
-    margin: @calendar-confirm-button-margin;
+    height: var(--van-calendar-confirm-button-height);
+    margin: var(--van-calendar-confirm-button-margin);
  }
 }
--- a/src/calendar/var.less
+++ b/src/calendar/var.less
@ -1,27 +1,27 @@
@import '../style/var.less';

-@calendar-background-color: @white;
+@calendar-background-color: var(--van-white);
@calendar-popup-height: 80%;
@calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
@calendar-header-title-height: 44px;
-@calendar-header-title-font-size: @font-size-lg;
-@calendar-header-subtitle-font-size: @font-size-md;
+@calendar-header-title-font-size: var(--van-font-size-lg);
+@calendar-header-subtitle-font-size: var(--van-font-size-md);
@calendar-weekdays-height: 30px;
-@calendar-weekdays-font-size: @font-size-sm;
-@calendar-month-title-font-size: @font-size-md;
-@calendar-month-mark-color: fade(@gray-2, 80%);
+@calendar-weekdays-font-size: var(--van-font-size-sm);
+@calendar-month-title-font-size: var(--van-font-size-md);
+@calendar-month-mark-color: rgba(242, 243, 245, 0.8);
@calendar-month-mark-font-size: 160px;
@calendar-day-height: 64px;
-@calendar-day-font-size: @font-size-lg;
-@calendar-range-edge-color: @white;
-@calendar-range-edge-background-color: @red;
-@calendar-range-middle-color: @red;
+@calendar-day-font-size: var(--van-font-size-lg);
+@calendar-range-edge-color: var(--van-white);
+@calendar-range-edge-background-color: var(--van-red);
+@calendar-range-middle-color: var(--van-red);
@calendar-range-middle-background-opacity: 0.1;
@calendar-selected-day-size: 54px;
-@calendar-selected-day-color: @white;
-@calendar-info-font-size: @font-size-xs;
-@calendar-info-line-height: @line-height-xs;
-@calendar-selected-day-background-color: @red;
-@calendar-day-disabled-color: @gray-5;
+@calendar-selected-day-color: var(--van-white);
+@calendar-info-font-size: var(--van-font-size-xs);
+@calendar-info-line-height: var(--van-line-height-xs);
+@calendar-selected-day-background-color: var(--van-red);
+@calendar-day-disabled-color: var(--van-gray-5);
@calendar-confirm-button-height: 36px;
@calendar-confirm-button-margin: 7px 0;
--- a/src/card/index.less
+++ b/src/card/index.less
@ -1,15 +1,34 @@
@import './var.less';

+:root {
+  --van-card-padding: @card-padding;
+  --van-card-font-size: @card-font-size;
+  --van-card-text-color: @card-text-color;
+  --van-card-background-color: @card-background-color;
+  --van-card-thumb-size: @card-thumb-size;
+  --van-card-thumb-border-radius: @card-thumb-border-radius;
+  --van-card-title-line-height: @card-title-line-height;
+  --van-card-desc-color: @card-desc-color;
+  --van-card-desc-line-height: @card-desc-line-height;
+  --van-card-price-color: @card-price-color;
+  --van-card-origin-price-color: @card-origin-price-color;
+  --van-card-num-color: @card-num-color;
+  --van-card-origin-price-font-size: @card-origin-price-font-size;
+  --van-card-price-font-size: @card-price-font-size;
+  --van-card-price-integer-font-size: @card-price-integer-font-size;
+  --van-card-price-font-family: @card-price-font-family;
+}
+
 .van-card {
  position: relative;
  box-sizing: border-box;
-  padding: @card-padding;
-  color: @card-text-color;
-  font-size: @card-font-size;
-  background-color: @card-background-color;
+  padding: var(--van-card-padding);
+  color: var(--van-card-text-color);
+  font-size: var(--van-card-font-size);
+  background-color: var(--van-card-background-color);

  &:not(:first-child) {
-    margin-top: @padding-xs;
+    margin-top: var(--van-padding-xs);
  }

  &__header {
@ -19,12 +38,12 @@
  &__thumb {
    position: relative;
    flex: none;
-    width: @card-thumb-size;
-    height: @card-thumb-size;
-    margin-right: @padding-xs;
+    width: var(--van-card-thumb-size);
+    height: var(--van-card-thumb-size);
+    margin-right: var(--van-padding-xs);

    img {
-      border-radius: @card-thumb-border-radius;
+      border-radius: var(--van-card-thumb-border-radius);
    }
  }

@ -35,7 +54,7 @@
    flex-direction: column;
    justify-content: space-between;
    min-width: 0; /* hack for flex box ellipsis */
-    min-height: @card-thumb-size;
+    min-height: var(--van-card-thumb-size);

    &--centered {
      justify-content: center;
@ -49,47 +68,47 @@

  &__title {
    max-height: 32px;
-    font-weight: @font-weight-bold;
-    line-height: @card-title-line-height;
+    font-weight: var(--van-font-weight-bold);
+    line-height: var(--van-card-title-line-height);
  }

  &__desc {
-    max-height: @card-desc-line-height;
-    color: @card-desc-color;
-    line-height: @card-desc-line-height;
+    max-height: var(--van-card-desc-line-height);
+    color: var(--van-card-desc-color);
+    line-height: var(--van-card-desc-line-height);
  }

  &__bottom {
-    line-height: @line-height-md;
+    line-height: var(--van-line-height-md);
  }

  &__price {
    display: inline-block;
-    color: @card-price-color;
-    font-weight: @font-weight-bold;
-    font-size: @card-price-font-size;
+    color: var(--van-card-price-color);
+    font-weight: var(--van-font-weight-bold);
+    font-size: var(--van-card-price-font-size);
  }

  &__price-integer {
-    font-size: @card-price-integer-font-size;
-    font-family: @card-price-font-family;
+    font-size: var(--van-card-price-integer-font-size);
+    font-family: var(--van-card-price-font-family);
  }

  &__price-decimal {
-    font-family: @card-price-font-family;
+    font-family: var(--van-card-price-font-family);
  }

  &__origin-price {
    display: inline-block;
    margin-left: 5px;
-    color: @card-origin-price-color;
-    font-size: @card-origin-price-font-size;
+    color: var(--van-card-origin-price-color);
+    font-size: var(--van-card-origin-price-font-size);
    text-decoration: line-through;
  }

  &__num {
    float: right;
-    color: @card-num-color;
+    color: var(--van-card-num-color);
  }

  &__tag {
--- a/src/card/var.less
+++ b/src/card/var.less
@ -1,18 +1,18 @@
@import '../style/var.less';

-@card-padding: @padding-xs @padding-md;
-@card-font-size: @font-size-sm;
-@card-text-color: @text-color;
-@card-background-color: @background-color-light;
+@card-padding: var(--van-padding-xs) var(--van-padding-md);
+@card-font-size: var(--van-font-size-sm);
+@card-text-color: var(--van-text-color);
+@card-background-color: var(--van-background-color-light);
@card-thumb-size: 88px;
-@card-thumb-border-radius: @border-radius-lg;
+@card-thumb-border-radius: var(--van-border-radius-lg);
@card-title-line-height: 16px;
-@card-desc-color: @gray-7;
-@card-desc-line-height: @line-height-md;
-@card-price-color: @gray-8;
-@card-origin-price-color: @gray-6;
-@card-num-color: @gray-6;
-@card-origin-price-font-size: @font-size-xs;
-@card-price-font-size: @font-size-sm;
-@card-price-integer-font-size: @font-size-lg;
-@card-price-font-family: @price-integer-font-family;
+@card-desc-color: var(--van-gray-7);
+@card-desc-line-height: var(--van-line-height-md);
+@card-price-color: var(--van-gray-8);
+@card-origin-price-color: var(--van-gray-6);
+@card-num-color: var(--van-gray-6);
+@card-origin-price-font-size: var(--van-font-size-xs);
+@card-price-font-size: var(--van-font-size-sm);
+@card-price-integer-font-size: var(--van-font-size-lg);
+@card-price-font-family: var(--van-price-integer-font-family);
--- a/src/cascader/index.less
+++ b/src/cascader/index.less
@ -1,26 +1,42 @@
@import './var.less';

+:root {
+  --van-cascader-header-height: @cascader-header-height;
+  --van-cascader-header-padding: @cascader-header-padding;
+  --van-cascader-title-font-size: @cascader-title-font-size;
+  --van-cascader-title-line-height: @cascader-title-line-height;
+  --van-cascader-close-icon-size: @cascader-close-icon-size;
+  --van-cascader-close-icon-color: @cascader-close-icon-color;
+  --van-cascader-close-icon-active-color: @cascader-close-icon-active-color;
+  --van-cascader-selected-icon-size: @cascader-selected-icon-size;
+  --van-cascader-tabs-height: @cascader-tabs-height;
+  --van-cascader-active-color: @cascader-active-color;
+  --van-cascader-options-height: @cascader-options-height;
+  --van-cascader-tab-color: @cascader-tab-color;
+  --van-cascader-unselected-tab-color: @cascader-unselected-tab-color;
+}
+
 .van-cascader {
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    height: @cascader-header-height;
-    padding: @cascader-header-padding;
+    height: var(--van-cascader-header-height);
+    padding: var(--van-cascader-header-padding);
  }

  &__title {
-    font-weight: @font-weight-bold;
-    font-size: @cascader-title-font-size;
-    line-height: @cascader-title-line-height;
+    font-weight: var(--van-font-weight-bold);
+    font-size: var(--van-cascader-title-font-size);
+    line-height: var(--van-cascader-title-line-height);
  }

  &__close-icon {
-    color: @cascader-close-icon-color;
-    font-size: @cascader-close-icon-size;
+    color: var(--van-cascader-close-icon-color);
+    font-size: var(--van-cascader-close-icon-size);

    &:active {
-      color: @cascader-close-icon-active-color;
+      color: var(--van-cascader-close-icon-active-color);
    }
  }

@ -31,7 +47,7 @@
    }

    &.van-tabs--line .van-tabs__wrap {
-      height: @cascader-tabs-height;
+      height: var(--van-cascader-tabs-height);
    }

    .van-tabs__nav--complete {
@ -41,11 +57,11 @@
  }

  &__tab {
-    color: @cascader-tab-color;
-    font-weight: @font-weight-bold;
+    color: var(--van-cascader-tab-color);
+    font-weight: var(--van-font-weight-bold);

    &--unselected {
-      color: @cascader-unselected-tab-color;
+      color: var(--van-cascader-unselected-tab-color);
      font-weight: normal;
    }
  }
@ -54,27 +70,27 @@
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 10px @padding-md;
-    font-size: @font-size-md;
-    line-height: @line-height-md;
+    padding: 10px var(--van-padding-md);
+    font-size: var(--van-font-size-md);
+    line-height: var(--van-line-height-md);

    &:active {
-      background-color: @active-color;
+      background-color: var(--van-active-color);
    }

    &--selected {
-      color: @cascader-active-color;
-      font-weight: @font-weight-bold;
+      color: var(--van-cascader-active-color);
+      font-weight: var(--van-font-weight-bold);
    }
  }

  &__selected-icon {
-    font-size: @cascader-selected-icon-size;
+    font-size: var(--van-cascader-selected-icon-size);
  }

  &__options {
    box-sizing: border-box;
-    height: @cascader-options-height;
+    height: var(--van-cascader-options-height);
    padding-top: 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
--- a/src/cascader/var.less
+++ b/src/cascader/var.less
@ -1,15 +1,15 @@
@import '../style/var.less';

@cascader-header-height: 48px;
-@cascader-header-padding: 0 @padding-md;
-@cascader-title-font-size: @font-size-lg;
+@cascader-header-padding: 0 var(--van-padding-md);
+@cascader-title-font-size: var(--van-font-size-lg);
@cascader-title-line-height: 20px;
@cascader-close-icon-size: 22px;
-@cascader-close-icon-color: @gray-5;
-@cascader-close-icon-active-color: @gray-6;
+@cascader-close-icon-color: var(--van-gray-5);
+@cascader-close-icon-active-color: var(--van-gray-6);
@cascader-selected-icon-size: 18px;
@cascader-tabs-height: 48px;
-@cascader-active-color: @red;
+@cascader-active-color: var(--van-red);
@cascader-options-height: 384px;
-@cascader-tab-color: @text-color;
-@cascader-unselected-tab-color: @gray-6;
+@cascader-tab-color: var(--van-text-color);
+@cascader-unselected-tab-color: var(--van-gray-6);
--- a/src/cell-group/index.less
+++ b/src/cell-group/index.less
@ -1,12 +1,20 @@
@import './var.less';

+:root {
+  --van-cell-group-background-color: @cell-group-background-color;
+  --van-cell-group-title-color: @cell-group-title-color;
+  --van-cell-group-title-padding: @cell-group-title-padding;
+  --van-cell-group-title-font-size: @cell-group-title-font-size;
+  --van-cell-group-title-line-height: @cell-group-title-line-height;
+}
+
 .van-cell-group {
-  background-color: @cell-group-background-color;
+  background-color: var(--van-cell-group-background-color);

  &__title {
-    padding: @cell-group-title-padding;
-    color: @cell-group-title-color;
-    font-size: @cell-group-title-font-size;
-    line-height: @cell-group-title-line-height;
+    padding: var(--van-cell-group-title-padding);
+    color: var(--van-cell-group-title-color);
+    font-size: var(--van-cell-group-title-font-size);
+    line-height: var(--van-cell-group-title-line-height);
  }
 }
--- a/src/cell-group/var.less
+++ b/src/cell-group/var.less
@ -1,7 +1,8 @@
@import '../style/var.less';

-@cell-group-background-color: @white;
-@cell-group-title-color: @gray-6;
-@cell-group-title-padding: @padding-md @padding-md @padding-xs;
-@cell-group-title-font-size: @font-size-md;
+@cell-group-background-color: var(--van-white);
+@cell-group-title-color: var(--van-gray-6);
+@cell-group-title-padding: var(--van-padding-md) var(--van-padding-md)
+  var(--van-padding-xs);
+@cell-group-title-font-size: var(--van-font-size-md);
@cell-group-title-line-height: 16px;
--- a/src/cell/index.less
+++ b/src/cell/index.less
@ -1,20 +1,42 @@
@import './var.less';
@import '../style/mixins/hairline';

+:root {
+  --van-cell-font-size: @cell-font-size;
+  --van-cell-line-height: @cell-line-height;
+  --van-cell-vertical-padding: @cell-vertical-padding;
+  --van-cell-horizontal-padding: @cell-horizontal-padding;
+  --van-cell-text-color: @cell-text-color;
+  --van-cell-background-color: @cell-background-color;
+  --van-cell-border-color: @cell-border-color;
+  --van-cell-active-color: @cell-active-color;
+  --van-cell-required-color: @cell-required-color;
+  --van-cell-label-color: @cell-label-color;
+  --van-cell-label-font-size: @cell-label-font-size;
+  --van-cell-label-line-height: @cell-label-line-height;
+  --van-cell-label-margin-top: @cell-label-margin-top;
+  --van-cell-value-color: @cell-value-color;
+  --van-cell-icon-size: @cell-icon-size;
+  --van-cell-right-icon-color: @cell-right-icon-color;
+  --van-cell-large-vertical-padding: @cell-large-vertical-padding;
+  --van-cell-large-title-font-size: @cell-large-title-font-size;
+  --van-cell-large-label-font-size: @cell-large-label-font-size;
+}
+
 .van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
-  padding: @cell-vertical-padding @cell-horizontal-padding;
+  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  overflow: hidden;
-  color: @cell-text-color;
-  font-size: @cell-font-size;
-  line-height: @cell-line-height;
-  background-color: @cell-background-color;
+  color: var(--van-cell-text-color);
+  font-size: var(--van-cell-font-size);
+  line-height: var(--van-cell-line-height);
+  background-color: var(--van-cell-background-color);

  &::after {
-    .hairline-bottom(@cell-border-color, @padding-md, @padding-md);
+    .hairline-bottom(var(--van-cell-border-color), var(--van-padding-md), var(--van-padding-md));
  }

  &:last-child::after,
@ -23,10 +45,10 @@
  }

  &__label {
-    margin-top: @cell-label-margin-top;
-    color: @cell-label-color;
-    font-size: @cell-label-font-size;
-    line-height: @cell-label-line-height;
+    margin-top: var(--van-cell-label-margin-top);
+    color: var(--van-cell-label-color);
+    font-size: var(--van-cell-label-font-size);
+    line-height: var(--van-cell-label-line-height);
  }

  &__title,
@ -37,38 +59,38 @@
  &__value {
    position: relative;
    overflow: hidden;
-    color: @cell-value-color;
+    color: var(--van-cell-value-color);
    text-align: right;
    vertical-align: middle;
    word-wrap: break-word;

    &--alone {
-      color: @text-color;
+      color: var(--van-text-color);
      text-align: left;
    }
  }

  &__left-icon,
  &__right-icon {
-    height: @cell-line-height;
-    font-size: @cell-icon-size;
-    line-height: @cell-line-height;
+    height: var(--van-cell-line-height);
+    font-size: var(--van-cell-icon-size);
+    line-height: var(--van-cell-line-height);
  }

  &__left-icon {
-    margin-right: @padding-base;
+    margin-right: var(--van-padding-base);
  }

  &__right-icon {
-    margin-left: @padding-base;
-    color: @cell-right-icon-color;
+    margin-left: var(--van-padding-base);
+    color: var(--van-cell-right-icon-color);
  }

  &--clickable {
    cursor: pointer;

    &:active {
-      background-color: @cell-active-color;
+      background-color: var(--van-cell-active-color);
    }
  }

@ -77,9 +99,9 @@

    &::before {
      position: absolute;
-      left: @padding-xs;
-      color: @cell-required-color;
-      font-size: @cell-font-size;
+      left: var(--van-padding-xs);
+      color: var(--van-cell-required-color);
+      font-size: var(--van-cell-font-size);
      content: '*';
    }
  }
@ -89,15 +111,15 @@
  }

  &--large {
-    padding-top: @cell-large-vertical-padding;
-    padding-bottom: @cell-large-vertical-padding;
+    padding-top: var(--van-cell-large-vertical-padding);
+    padding-bottom: var(--van-cell-large-vertical-padding);

    .van-cell__title {
-      font-size: @cell-large-title-font-size;
+      font-size: var(--van-cell-large-title-font-size);
    }

    .van-cell__label {
-      font-size: @cell-large-label-font-size;
+      font-size: var(--van-cell-large-label-font-size);
    }
  }
 }
--- a/src/cell/var.less
+++ b/src/cell/var.less
@ -1,21 +1,21 @@
@import '../style/var.less';

-@cell-font-size: @font-size-md;
+@cell-font-size: var(--van-font-size-md);
@cell-line-height: 24px;
@cell-vertical-padding: 10px;
-@cell-horizontal-padding: @padding-md;
-@cell-text-color: @text-color;
-@cell-background-color: @white;
-@cell-border-color: @border-color;
-@cell-active-color: @active-color;
-@cell-required-color: @red;
-@cell-label-color: @gray-6;
-@cell-label-font-size: @font-size-sm;
-@cell-label-line-height: @line-height-sm;
-@cell-label-margin-top: @padding-base;
-@cell-value-color: @gray-6;
+@cell-horizontal-padding: var(--van-padding-md);
+@cell-text-color: var(--van-text-color);
+@cell-background-color: var(--van-white);
+@cell-border-color: var(--van-border-color);
+@cell-active-color: var(--van-active-color);
+@cell-required-color: var(--van-red);
+@cell-label-color: var(--van-gray-6);
+@cell-label-font-size: var(--van-font-size-sm);
+@cell-label-line-height: var(--van-line-height-sm);
+@cell-label-margin-top: var(--van-padding-base);
+@cell-value-color: var(--van-gray-6);
@cell-icon-size: 16px;
-@cell-right-icon-color: @gray-6;
-@cell-large-vertical-padding: @padding-sm;
-@cell-large-title-font-size: @font-size-lg;
-@cell-large-label-font-size: @font-size-md;
+@cell-right-icon-color: var(--van-gray-6);
+@cell-large-vertical-padding: var(--van-padding-sm);
+@cell-large-title-font-size: var(--van-font-size-lg);
+@cell-large-label-font-size: var(--van-font-size-md);
--- a/src/checkbox/index.less
+++ b/src/checkbox/index.less
@ -1,5 +1,17 @@
@import './var.less';

+:root {
+  --van-checkbox-size: @checkbox-size;
+  --van-checkbox-border-color: @checkbox-border-color;
+  --van-checkbox-transition-duration: @checkbox-transition-duration;
+  --van-checkbox-label-margin: @checkbox-label-margin;
+  --van-checkbox-label-color: @checkbox-label-color;
+  --van-checkbox-checked-icon-color: @checkbox-checked-icon-color;
+  --van-checkbox-disabled-icon-color: @checkbox-disabled-icon-color;
+  --van-checkbox-disabled-label-color: @checkbox-disabled-label-color;
+  --van-checkbox-disabled-background-color: @checkbox-disabled-background-color;
+}
+
 .van-checkbox {
  display: flex;
  align-items: center;
@ -16,13 +28,13 @@
  }

  &--horizontal {
-    margin-right: @padding-sm;
+    margin-right: var(--van-padding-sm);
  }

  &__icon {
    flex: none;
    height: 1em;
-    font-size: @checkbox-size;
+    font-size: var(--van-checkbox-size);
    line-height: 1em;
    cursor: pointer;

@ -35,8 +47,8 @@
      font-size: 0.8em;
      line-height: 1.25;
      text-align: center;
-      border: 1px solid @checkbox-border-color;
-      transition-duration: @checkbox-transition-duration;
+      border: 1px solid var(--van-checkbox-border-color);
+      transition-duration: var(--van-checkbox-transition-duration);
      transition-property: color, border-color, background-color;
    }

@ -48,9 +60,9 @@

    &--checked {
      .van-icon {
-        color: @white;
-        background-color: @checkbox-checked-icon-color;
-        border-color: @checkbox-checked-icon-color;
+        color: var(--van-white);
+        background-color: var(--van-checkbox-checked-icon-color);
+        border-color: var(--van-checkbox-checked-icon-color);
      }
    }

@ -58,29 +70,29 @@
      cursor: not-allowed;

      .van-icon {
-        background-color: @checkbox-disabled-background-color;
-        border-color: @checkbox-disabled-icon-color;
+        background-color: var(--van-checkbox-disabled-background-color);
+        border-color: var(--van-checkbox-disabled-icon-color);
      }
    }

    &--disabled&--checked {
      .van-icon {
-        color: @checkbox-disabled-icon-color;
+        color: var(--van-checkbox-disabled-icon-color);
      }
    }
  }

  &__label {
-    margin-left: @checkbox-label-margin;
-    color: @checkbox-label-color;
-    line-height: @checkbox-size;
+    margin-left: var(--van-checkbox-label-margin);
+    color: var(--van-checkbox-label-color);
+    line-height: var(--van-checkbox-size);

    &--left {
-      margin: 0 @checkbox-label-margin 0 0;
+      margin: 0 var(--van-checkbox-label-margin) 0 0;
    }

    &--disabled {
-      color: @checkbox-disabled-label-color;
+      color: var(--van-checkbox-disabled-label-color);
    }
  }
 }
--- a/src/checkbox/var.less
+++ b/src/checkbox/var.less
@ -1,11 +1,11 @@
@import '../style/var.less';

@checkbox-size: 20px;
-@checkbox-border-color: @gray-5;
-@checkbox-transition-duration: @animation-duration-fast;
-@checkbox-label-margin: @padding-xs;
-@checkbox-label-color: @text-color;
-@checkbox-checked-icon-color: @blue;
-@checkbox-disabled-icon-color: @gray-5;
-@checkbox-disabled-label-color: @gray-5;
-@checkbox-disabled-background-color: @border-color;
+@checkbox-border-color: var(--van-gray-5);
+@checkbox-transition-duration: var(--van-animation-duration-fast);
+@checkbox-label-margin: var(--van-padding-xs);
+@checkbox-label-color: var(--van-text-color);
+@checkbox-checked-icon-color: var(--van-blue);
+@checkbox-disabled-icon-color: var(--van-gray-5);
+@checkbox-disabled-label-color: var(--van-gray-5);
+@checkbox-disabled-background-color: var(--van-border-color);
--- a/src/circle/index.less
+++ b/src/circle/index.less
@ -1,10 +1,20 @@
@import './var.less';

+:root {
+  --van-circle-size: @circle-size;
+  --van-circle-color: @circle-color;
+  --van-circle-layer-color: @circle-layer-color;
+  --van-circle-text-color: @circle-text-color;
+  --van-circle-text-font-weight: @circle-text-font-weight;
+  --van-circle-text-font-size: @circle-text-font-size;
+  --van-circle-text-line-height: @circle-text-line-height;
+}
+
 .van-circle {
  position: relative;
  display: inline-block;
-  width: @circle-size;
-  height: @circle-size;
+  width: var(--van-circle-size);
+  height: var(--van-circle-size);
  text-align: center;

  svg {
@ -16,12 +26,12 @@
  }

  &__layer {
-    stroke: @circle-layer-color;
+    stroke: var(--van-circle-layer-color);
  }

  &__hover {
    fill: none;
-    stroke: @circle-color;
+    stroke: var(--van-circle-color);
    stroke-linecap: round;
  }

@ -31,11 +41,11 @@
    left: 0;
    box-sizing: border-box;
    width: 100%;
-    padding: 0 @padding-base;
-    color: @circle-text-color;
-    font-weight: @circle-text-font-weight;
-    font-size: @circle-text-font-size;
-    line-height: @circle-text-line-height;
+    padding: 0 var(--van-padding-base);
+    color: var(--van-circle-text-color);
+    font-weight: var(--van-circle-text-font-weight);
+    font-size: var(--van-circle-text-font-size);
+    line-height: var(--van-circle-text-line-height);
    transform: translateY(-50%);
  }
 }
--- a/src/circle/var.less
+++ b/src/circle/var.less
@ -1,9 +1,9 @@
@import '../style/var.less';

@circle-size: 100px;
-@circle-color: @blue;
-@circle-layer-color: @white;
-@circle-text-color: @text-color;
-@circle-text-font-weight: @font-weight-bold;
-@circle-text-font-size: @font-size-md;
-@circle-text-line-height: @line-height-md;
+@circle-color: var(--van-blue);
+@circle-layer-color: var(--van-white);
+@circle-text-color: var(--van-text-color);
+@circle-text-font-weight: var(--van-font-weight-bold);
+@circle-text-font-size: var(--van-font-size-md);
+@circle-text-line-height: var(--van-line-height-md);
--- a/src/collapse-item/index.less
+++ b/src/collapse-item/index.less
@ -1,12 +1,22 @@
@import './var.less';
@import '../style/mixins/hairline';

+:root {
+  --van-collapse-item-transition-duration: @collapse-item-transition-duration;
+  --van-collapse-item-content-padding: @collapse-item-content-padding;
+  --van-collapse-item-content-font-size: @collapse-item-content-font-size;
+  --van-collapse-item-content-line-height: @collapse-item-content-line-height;
+  --van-collapse-item-content-text-color: @collapse-item-content-text-color;
+  --van-collapse-item-content-background-color: @collapse-item-content-background-color;
+  --van-collapse-item-title-disabled-color: @collapse-item-title-disabled-color;
+}
+
 .van-collapse-item {
  position: relative;

  &--border {
    &::after {
-      .hairline-top(@border-color, @padding-md, @padding-md);
+      .hairline-top(var(--van-border-color), var(--van-padding-md), var(--van-padding-md));
    }
  }

@ -15,11 +25,11 @@
      // using translateZ to fix safari rendering issues
      // see: https://github.com/youzan/vant/issues/8608
      transform: rotate(90deg) translateZ(0);
-      transition: transform @collapse-item-transition-duration;
+      transition: transform var(--van-collapse-item-transition-duration);
    }

    &::after {
-      right: @padding-md;
+      right: var(--van-padding-md);
      display: none;
    }

@ -44,22 +54,22 @@

      &,
      & .van-cell__right-icon {
-        color: @collapse-item-title-disabled-color;
+        color: var(--van-collapse-item-title-disabled-color);
      }
    }
  }

  &__wrapper {
    overflow: hidden;
-    transition: height @collapse-item-transition-duration ease-in-out;
+    transition: height var(--van-collapse-item-transition-duration) ease-in-out;
    will-change: height;
  }

  &__content {
-    padding: @collapse-item-content-padding;
-    color: @collapse-item-content-text-color;
-    font-size: @collapse-item-content-font-size;
-    line-height: @collapse-item-content-line-height;
-    background-color: @collapse-item-content-background-color;
+    padding: var(--van-collapse-item-content-padding);
+    color: var(--van-collapse-item-content-text-color);
+    font-size: var(--van-collapse-item-content-font-size);
+    line-height: var(--van-collapse-item-content-line-height);
+    background-color: var(--van-collapse-item-content-background-color);
  }
 }
--- a/src/collapse-item/var.less
+++ b/src/collapse-item/var.less
@ -1,9 +1,9 @@
@import '../style/var.less';

-@collapse-item-transition-duration: @animation-duration-base;
-@collapse-item-content-padding: @padding-sm @padding-md;
-@collapse-item-content-font-size: @font-size-md;
+@collapse-item-transition-duration: var(--van-animation-duration-base);
+@collapse-item-content-padding: var(--van-padding-sm) var(--van-padding-md);
+@collapse-item-content-font-size: var(--van-font-size-md);
@collapse-item-content-line-height: 1.5;
-@collapse-item-content-text-color: @gray-6;
-@collapse-item-content-background-color: @white;
-@collapse-item-title-disabled-color: @gray-5;
+@collapse-item-content-text-color: var(--van-gray-6);
+@collapse-item-content-background-color: var(--van-white);
+@collapse-item-title-disabled-color: var(--van-gray-5);
--- a/src/contact-card/index.less
+++ b/src/contact-card/index.less
@ -1,21 +1,28 @@
@import './var.less';

+:root {
+  --van-contact-card-padding: @contact-card-padding;
+  --van-contact-card-add-icon-size: @contact-card-add-icon-size;
+  --van-contact-card-add-icon-color: @contact-card-add-icon-color;
+  --van-contact-card-value-line-height: @contact-card-value-line-height;
+}
+
 .van-contact-card {
-  padding: @contact-card-padding;
+  padding: var(--van-contact-card-padding);

  &__value {
    margin-left: 5px;
-    line-height: @contact-card-value-line-height;
+    line-height: var(--van-contact-card-value-line-height);
  }

  &--add {
    .van-contact-card__value {
-      line-height: @contact-card-add-icon-size;
+      line-height: var(--van-contact-card-add-icon-size);
    }

    .van-cell__left-icon {
-      color: @contact-card-add-icon-color;
-      font-size: @contact-card-add-icon-size;
+      color: var(--van-contact-card-add-icon-color);
+      font-size: var(--van-contact-card-add-icon-size);
    }
  }

@ -31,8 +38,8 @@
      #ff6c6c 20%,
      transparent 0,
      transparent 25%,
-      @blue 0,
-      @blue 45%,
+      var(--van-blue) 0,
+      var(--van-blue) 45%,
      transparent 0,
      transparent 50%
    );
--- a/src/contact-card/var.less
+++ b/src/contact-card/var.less
@ -1,6 +1,6 @@
@import '../style/var.less';

-@contact-card-padding: @padding-md;
+@contact-card-padding: var(--van-padding-md);
@contact-card-add-icon-size: 40px;
-@contact-card-add-icon-color: @blue;
-@contact-card-value-line-height: @line-height-md;
+@contact-card-add-icon-color: var(--van-blue);
+@contact-card-value-line-height: var(--van-line-height-md);
--- a/src/contact-edit/index.less
+++ b/src/contact-edit/index.less
@ -1,14 +1,23 @@
@import './var.less';

+:root {
+  --van-contact-edit-padding: @contact-edit-padding;
+  --van-contact-edit-fields-radius: @contact-edit-fields-radius;
+  --van-contact-edit-buttons-padding: @contact-edit-buttons-padding;
+  --van-contact-edit-button-margin-bottom: @contact-edit-button-margin-bottom;
+  --van-contact-edit-button-font-size: @contact-edit-button-font-size;
+  --van-contact-edit-field-label-width: @contact-edit-field-label-width;
+}
+
 .van-contact-edit {
-  padding: @contact-edit-padding;
+  padding: var(--van-contact-edit-padding);

  &__fields {
    overflow: hidden;
-    border-radius: @contact-edit-fields-radius;
+    border-radius: var(--van-contact-edit-fields-radius);

    .van-field__label {
-      width: @contact-edit-field-label-width;
+      width: var(--van-contact-edit-field-label-width);
    }
  }

@ -16,15 +25,15 @@
    margin-top: 10px;
    padding-top: 9px;
    padding-bottom: 9px;
-    border-radius: @contact-edit-fields-radius;
+    border-radius: var(--van-contact-edit-fields-radius);
  }

  &__buttons {
-    padding: @contact-edit-buttons-padding;
+    padding: var(--van-contact-edit-buttons-padding);
  }

  .van-button {
-    margin-bottom: @contact-edit-button-margin-bottom;
-    font-size: @contact-edit-button-font-size;
+    margin-bottom: var(--van-contact-edit-button-margin-bottom);
+    font-size: var(--van-contact-edit-button-font-size);
  }
 }
--- a/src/contact-edit/var.less
+++ b/src/contact-edit/var.less
@ -1,8 +1,8 @@
@import '../style/var.less';

-@contact-edit-padding: @padding-md;
-@contact-edit-fields-radius: @border-radius-md;
-@contact-edit-buttons-padding: @padding-xl 0;
-@contact-edit-button-margin-bottom: @padding-sm;
+@contact-edit-padding: var(--van-padding-md);
+@contact-edit-fields-radius: var(--van-border-radius-md);
+@contact-edit-buttons-padding: var(--van-padding-xl) 0;
+@contact-edit-button-margin-bottom: var(--van-padding-sm);
@contact-edit-button-font-size: 16px;
@contact-edit-field-label-width: 4.1em;
--- a/src/contact-list/index.less
+++ b/src/contact-list/index.less
@ -1,25 +1,32 @@
@import './var.less';
@import '../style/mixins/safe-area.less';

+:root {
+  --van-contact-list-edit-icon-size: @contact-list-edit-icon-size;
+  --van-contact-list-add-button-z-index: @contact-list-add-button-z-index;
+  --van-contact-list-item-padding: @contact-list-item-padding;
+  --van-contact-list-item-radio-icon-color: @contact-list-item-radio-icon-color;
+}
+
 .van-contact-list {
  box-sizing: border-box;
  height: 100%;
  padding-bottom: 80px;

  &__item {
-    padding: @contact-list-item-padding;
+    padding: var(--van-contact-list-item-padding);
  }

  &__item-value {
    display: flex;
    align-items: center;
-    padding-right: @padding-xl;
-    padding-left: @padding-xs;
+    padding-right: var(--van-padding-xl);
+    padding-left: var(--van-padding-xs);
  }

  &__item-tag {
    flex: none;
-    margin-left: @padding-xs;
+    margin-left: var(--van-padding-xs);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.4em;
@ -33,13 +40,13 @@
  }

  &__edit {
-    font-size: @contact-list-edit-icon-size;
+    font-size: var(--van-contact-list-edit-icon-size);
  }

  &__radio {
    .van-radio__icon--checked .van-icon {
-      background-color: @contact-list-item-radio-icon-color;
-      border-color: @contact-list-item-radio-icon-color;
+      background-color: var(--van-contact-list-item-radio-icon-color);
+      border-color: var(--van-contact-list-item-radio-icon-color);
    }
  }

@ -48,9 +55,9 @@
    right: 0;
    bottom: 0;
    left: 0;
-    z-index: @contact-list-add-button-z-index;
-    padding: 0 @padding-md;
-    background-color: @white;
+    z-index: var(--van-contact-list-add-button-z-index);
+    padding: 0 var(--van-padding-md);
+    background-color: var(--van-white);
    .safe-area-inset-bottom();
  }

--- a/src/contact-list/var.less
+++ b/src/contact-list/var.less
@ -2,5 +2,5 @@

@contact-list-edit-icon-size: 16px;
@contact-list-add-button-z-index: 999;
-@contact-list-item-padding: @padding-md;
-@contact-list-item-radio-icon-color: @red;
+@contact-list-item-padding: var(--van-padding-md);
+@contact-list-item-radio-icon-color: var(--van-red);
--- a/src/count-down/index.less
+++ b/src/count-down/index.less
@ -1,7 +1,13 @@
@import './var.less';

-.van-count-down {
-  color: @count-down-text-color;
-  font-size: @count-down-font-size;
-  line-height: @count-down-line-height;
+:root {
+  --van-count-down-text-color: @count-down-text-color;
+  --van-count-down-font-size: @count-down-font-size;
+  --van-count-down-line-height: @count-down-line-height;
+}
+
+.van-count-down {
+  color: var(--van-count-down-text-color);
+  font-size: var(--van-count-down-font-size);
+  line-height: var(--van-count-down-line-height);
 }
--- a/src/count-down/var.less
+++ b/src/count-down/var.less
@ -1,5 +1,5 @@
@import '../style/var.less';

-@count-down-text-color: @text-color;
-@count-down-font-size: @font-size-md;
-@count-down-line-height: @line-height-md;
+@count-down-text-color: var(--van-text-color);
+@count-down-font-size: var(--van-font-size-md);
+@count-down-line-height: var(--van-line-height-md);
--- a/src/coupon-cell/index.less
+++ b/src/coupon-cell/index.less
@ -1,7 +1,11 @@
@import './var.less';

+:root {
+  --van-coupon-cell-selected-text-color: @coupon-cell-selected-text-color;
+}
+
 .van-coupon-cell {
  &__value--selected {
-    color: @coupon-cell-selected-text-color;
+    color: var(--van-coupon-cell-selected-text-color);
  }
 }
--- a/src/coupon-cell/var.less
+++ b/src/coupon-cell/var.less
@ -1,3 +1,3 @@
@import '../style/var.less';

-@coupon-cell-selected-text-color: @text-color;
+@coupon-cell-selected-text-color: var(--van-text-color);
--- a/src/coupon-list/index.less
+++ b/src/coupon-list/index.less
@ -1,22 +1,33 @@
@import './var.less';

+:root {
+  --van-coupon-list-background-color: @coupon-list-background-color;
+  --van-coupon-list-field-padding: @coupon-list-field-padding;
+  --van-coupon-list-exchange-button-height: @coupon-list-exchange-button-height;
+  --van-coupon-list-close-button-height: @coupon-list-close-button-height;
+  --van-coupon-list-empty-image-size: @coupon-list-empty-image-size;
+  --van-coupon-list-empty-tip-color: @coupon-list-empty-tip-color;
+  --van-coupon-list-empty-tip-font-size: @coupon-list-empty-tip-font-size;
+  --van-coupon-list-empty-tip-line-height: @coupon-list-empty-tip-line-height;
+}
+
 .van-coupon-list {
  position: relative;
  height: 100%;
-  background-color: @coupon-list-background-color;
+  background-color: var(--van-coupon-list-background-color);

  &__field {
-    padding: @coupon-list-field-padding;
+    padding: var(--van-coupon-list-field-padding);

    .van-field__body {
      height: 34px;
-      padding-left: @padding-sm;
+      padding-left: var(--van-padding-sm);
      line-height: 34px;
-      background: @gray-1;
+      background: var(--van-gray-1);
      border-radius: 17px;

      &::placeholder {
-        color: @gray-5;
+        color: var(--van-gray-5);
      }
    }

@ -28,29 +39,29 @@
  &__exchange-bar {
    display: flex;
    align-items: center;
-    background-color: @white;
+    background-color: var(--van-white);
  }

  &__exchange {
    flex: none;
-    height: @coupon-list-exchange-button-height;
-    font-size: @font-size-lg;
-    line-height: @coupon-list-exchange-button-height - 2px;
+    height: var(--van-coupon-list-exchange-button-height);
+    font-size: var(--van-font-size-lg);
+    line-height: calc(var(--van-coupon-list-exchange-button-height) - 2px);
    border: 0;
  }

  .van-tabs__wrap {
-    box-shadow: 0 6px 12px -12px @gray-6;
+    box-shadow: 0 6px 12px -12px var(--van-gray-6);
  }

  &__list {
    box-sizing: border-box;
-    padding: @padding-md 0 @padding-lg;
+    padding: var(--van-padding-md) 0 var(--van-padding-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    &--with-bottom {
-      padding-bottom: @padding-md + 50px;
+      padding-bottom: calc(var(--van-padding-md) + 50px);
    }
  }

@ -61,13 +72,13 @@
    z-index: 999;
    box-sizing: border-box;
    width: 100%;
-    padding: 5px @padding-md;
-    font-weight: @font-weight-bold;
-    background-color: @white;
+    padding: 5px var(--van-padding-md);
+    font-weight: var(--van-font-weight-bold);
+    background-color: var(--van-white);
  }

  &__close {
-    height: @coupon-list-close-button-height;
+    height: var(--van-coupon-list-close-button-height);
  }

  &__empty {
@ -75,15 +86,15 @@
    text-align: center;

    p {
-      margin: @padding-md 0;
-      color: @coupon-list-empty-tip-color;
-      font-size: @coupon-list-empty-tip-font-size;
-      line-height: @coupon-list-empty-tip-line-height;
+      margin: var(--van-padding-md) 0;
+      color: var(--van-coupon-list-empty-tip-color);
+      font-size: var(--van-coupon-list-empty-tip-font-size);
+      line-height: var(--van-coupon-list-empty-tip-line-height);
    }

    img {
-      width: @coupon-list-empty-image-size;
-      height: @coupon-list-empty-image-size;
+      width: var(--van-coupon-list-empty-image-size);
+      height: var(--van-coupon-list-empty-image-size);
    }
  }
 }
--- a/src/coupon-list/var.less
+++ b/src/coupon-list/var.less
@ -1,10 +1,10 @@
@import '../style/var.less';

-@coupon-list-background-color: @background-color;
-@coupon-list-field-padding: 5px 0 5px @padding-md;
+@coupon-list-background-color: var(--van-background-color);
+@coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
@coupon-list-exchange-button-height: 32px;
@coupon-list-close-button-height: 40px;
@coupon-list-empty-image-size: 200px;
-@coupon-list-empty-tip-color: @gray-6;
-@coupon-list-empty-tip-font-size: @font-size-md;
-@coupon-list-empty-tip-line-height: @line-height-md;
+@coupon-list-empty-tip-color: var(--van-gray-6);
+@coupon-list-empty-tip-font-size: var(--van-font-size-md);
+@coupon-list-empty-tip-line-height: var(--van-line-height-md);
--- a/src/coupon/index.less
+++ b/src/coupon/index.less
@ -1,31 +1,50 @@
@import './var.less';
@import '../style/mixins/ellipsis';

+:root {
+  --van-coupon-margin: @coupon-margin;
+  --van-coupon-content-height: @coupon-content-height;
+  --van-coupon-content-padding: @coupon-content-padding;
+  --van-coupon-background-color: @coupon-background-color;
+  --van-coupon-active-background-color: @coupon-active-background-color;
+  --van-coupon-border-radius: @coupon-border-radius;
+  --van-coupon-box-shadow: @coupon-box-shadow;
+  --van-coupon-head-width: @coupon-head-width;
+  --van-coupon-amount-color: @coupon-amount-color;
+  --van-coupon-amount-font-size: @coupon-amount-font-size;
+  --van-coupon-currency-font-size: @coupon-currency-font-size;
+  --van-coupon-name-font-size: @coupon-name-font-size;
+  --van-coupon-disabled-text-color: @coupon-disabled-text-color;
+  --van-coupon-description-padding: @coupon-description-padding;
+  --van-coupon-description-border-color: @coupon-description-border-color;
+  --van-coupon-corner-checkbox-icon-color: @coupon-corner-checkbox-icon-color;
+}
+
 .van-coupon {
-  margin: @coupon-margin;
+  margin: var(--van-coupon-margin);
  overflow: hidden;
-  background-color: @coupon-background-color;
-  border-radius: @coupon-border-radius;
-  box-shadow: @coupon-box-shadow;
+  background-color: var(--van-coupon-background-color);
+  border-radius: var(--van-coupon-border-radius);
+  box-shadow: var(--van-coupon-box-shadow);

  &:active {
-    background-color: @coupon-active-background-color;
+    background-color: var(--van-coupon-active-background-color);
  }

  &__content {
    display: flex;
    align-items: center;
    box-sizing: border-box;
-    min-height: @coupon-content-height;
-    padding: @coupon-content-padding;
-    color: @gray-8;
+    min-height: var(--van-coupon-content-height);
+    padding: var(--van-coupon-content-padding);
+    color: var(--van-gray-8);
  }

  &__head {
    position: relative;
-    min-width: @coupon-head-width;
-    padding: 0 @padding-xs;
-    color: @coupon-amount-color;
+    min-width: var(--van-coupon-head-width);
+    padding: 0 var(--van-padding-xs);
+    color: var(--van-coupon-amount-color);
    text-align: center;
  }

@ -38,13 +57,13 @@

  &__amount {
    margin-bottom: 6px;
-    font-weight: @font-weight-bold;
-    font-size: @coupon-amount-font-size;
+    font-weight: var(--van-font-weight-bold);
+    font-size: var(--van-coupon-amount-font-size);
    .ellipsis();

    span {
      font-weight: normal;
-      font-size: @coupon-currency-font-size;
+      font-size: var(--van-coupon-currency-font-size);

      &:not(:empty) {
        margin-left: 2px;
@ -53,7 +72,7 @@
  }

  &__condition {
-    font-size: @font-size-sm;
+    font-size: var(--van-font-size-sm);
    line-height: 16px;
    white-space: pre-wrap;
  }
@ -61,45 +80,46 @@
  &__body {
    position: relative;
    flex: 1;
-    border-radius: 0 @coupon-border-radius @coupon-border-radius 0;
+    border-radius: 0 var(--van-coupon-border-radius)
+      var(--van-coupon-border-radius) 0;
  }

  &__name {
    margin-bottom: 10px;
    font-weight: bold;
-    font-size: @coupon-name-font-size;
-    line-height: @line-height-md;
+    font-size: var(--van-coupon-name-font-size);
+    line-height: var(--van-line-height-md);
  }

  &__valid {
-    font-size: @font-size-sm;
+    font-size: var(--van-font-size-sm);
  }

  &__corner {
    position: absolute;
    top: 0;
-    right: @padding-md;
+    right: var(--van-padding-md);
    bottom: 0;

    .van-checkbox__icon--checked .van-icon {
-      background-color: @coupon-corner-checkbox-icon-color;
-      border-color: @coupon-corner-checkbox-icon-color;
+      background-color: var(--van-coupon-corner-checkbox-icon-color);
+      border-color: var(--van-coupon-corner-checkbox-icon-color);
    }
  }

  &__description {
-    padding: @coupon-description-padding;
-    font-size: @font-size-sm;
-    border-top: 1px dashed @coupon-description-border-color;
+    padding: var(--van-coupon-description-padding);
+    font-size: var(--van-font-size-sm);
+    border-top: 1px dashed var(--van-coupon-description-border-color);
  }

  &--disabled {
    &:active {
-      background-color: @coupon-background-color;
+      background-color: var(--van-coupon-background-color);
    }

    .van-coupon-item__content {
-      height: @coupon-content-height - 10px;
+      height: calc(var(--van-coupon-content-height) - 10px);
    }

    .van-coupon__head {
--- a/src/coupon/var.less
+++ b/src/coupon/var.less
@ -1,18 +1,18 @@
@import '../style/var.less';

-@coupon-margin: 0 @padding-sm @padding-sm;
+@coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);
@coupon-content-height: 84px;
@coupon-content-padding: 14px 0;
-@coupon-background-color: @white;
-@coupon-active-background-color: @active-color;
-@coupon-border-radius: @border-radius-lg;
+@coupon-background-color: var(--van-white);
+@coupon-active-background-color: var(--van-active-color);
+@coupon-border-radius: var(--van-border-radius-lg);
@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
@coupon-head-width: 96px;
-@coupon-amount-color: @red;
+@coupon-amount-color: var(--van-red);
@coupon-amount-font-size: 30px;
@coupon-currency-font-size: 40%;
-@coupon-name-font-size: @font-size-md;
-@coupon-disabled-text-color: @gray-6;
-@coupon-description-padding: @padding-xs @padding-md;
-@coupon-description-border-color: @border-color;
-@coupon-corner-checkbox-icon-color: @red;
+@coupon-name-font-size: var(--van-font-size-md);
+@coupon-disabled-text-color: var(--van-gray-6);
+@coupon-description-padding: var(--van-padding-xs) var(--van-padding-md);
+@coupon-description-border-color: var(--van-border-color);
+@coupon-corner-checkbox-icon-color: var(--van-red);
--- a/src/dialog/index.less
+++ b/src/dialog/index.less
@ -1,29 +1,51 @@
@import './var.less';

+:root {
+  --van-dialog-width: @dialog-width;
+  --van-dialog-small-screen-width: @dialog-small-screen-width;
+  --van-dialog-font-size: @dialog-font-size;
+  --van-dialog-transition: @dialog-transition;
+  --van-dialog-border-radius: @dialog-border-radius;
+  --van-dialog-background-color: @dialog-background-color;
+  --van-dialog-header-font-weight: @dialog-header-font-weight;
+  --van-dialog-header-line-height: @dialog-header-line-height;
+  --van-dialog-header-padding-top: @dialog-header-padding-top;
+  --van-dialog-header-isolated-padding: @dialog-header-isolated-padding;
+  --van-dialog-message-padding: @dialog-message-padding;
+  --van-dialog-message-font-size: @dialog-message-font-size;
+  --van-dialog-message-line-height: @dialog-message-line-height;
+  --van-dialog-message-max-height: @dialog-message-max-height;
+  --van-dialog-has-title-message-text-color: @dialog-has-title-message-text-color;
+  --van-dialog-has-title-message-padding-top: @dialog-has-title-message-padding-top;
+  --van-dialog-button-height: @dialog-button-height;
+  --van-dialog-round-button-height: @dialog-round-button-height;
+  --van-dialog-confirm-button-text-color: @dialog-confirm-button-text-color;
+}
+
 .van-dialog {
  top: 45%;
  left: 50%;
-  width: @dialog-width;
+  width: var(--van-dialog-width);
  overflow: hidden;
-  font-size: @dialog-font-size;
-  background-color: @dialog-background-color;
-  border-radius: @dialog-border-radius;
+  font-size: var(--van-dialog-font-size);
+  background-color: var(--van-dialog-background-color);
+  border-radius: var(--van-dialog-border-radius);
  backface-visibility: hidden; // avoid blurry text after scale animation
-  transition: @dialog-transition;
+  transition: var(--van-dialog-transition);
  transition-property: transform, opacity;

  @media (max-width: 321px) {
-    width: @dialog-small-screen-width;
+    width: var(--van-dialog-small-screen-width);
  }

  &__header {
-    padding-top: @dialog-header-padding-top;
-    font-weight: @dialog-header-font-weight;
-    line-height: @dialog-header-line-height;
+    padding-top: var(--van-dialog-header-padding-top);
+    font-weight: var(--van-dialog-header-font-weight);
+    line-height: var(--van-dialog-header-line-height);
    text-align: center;

    &--isolated {
-      padding: @dialog-header-isolated-padding;
+      padding: var(--van-dialog-header-isolated-padding);
    }
  }

@ -37,21 +59,21 @@

  &__message {
    flex: 1;
-    max-height: @dialog-message-max-height;
-    padding: 26px @dialog-message-padding;
+    max-height: var(--van-dialog-message-max-height);
+    padding: 26px var(--van-dialog-message-padding);
    overflow-y: auto;
-    font-size: @dialog-message-font-size;
-    line-height: @dialog-message-line-height;
+    font-size: var(--van-dialog-message-font-size);
+    line-height: var(--van-dialog-message-line-height);

-    // allow newline charactor
+    // allow newline character
    white-space: pre-wrap;
    text-align: center;
    word-wrap: break-word;
    -webkit-overflow-scrolling: touch;

    &--has-title {
-      padding-top: @dialog-has-title-message-padding-top;
-      color: @dialog-has-title-message-text-color;
+      padding-top: var(--van-dialog-has-title-message-padding-top);
+      color: var(--van-dialog-has-title-message-text-color);
    }

    &--left {
@ -72,7 +94,7 @@
  &__confirm,
  &__cancel {
    flex: 1;
-    height: @dialog-button-height;
+    height: var(--van-dialog-button-height);
    margin: 0;
    border: 0;
  }
@ -80,7 +102,7 @@
  &__confirm {
    &,
    &:active {
-      color: @dialog-confirm-button-text-color;
+      color: var(--van-dialog-confirm-button-text-color);
    }
  }

@ -88,21 +110,21 @@
    .van-dialog__footer {
      position: relative;
      height: auto;
-      padding: @padding-xs @padding-lg @padding-md;
+      padding: var(--van-padding-xs) var(--van-padding-lg) var(--van-padding-md);
    }

    .van-dialog__message {
-      padding-bottom: @padding-md;
-      color: @text-color;
+      padding-bottom: var(--van-padding-md);
+      color: var(--van-text-color);
    }

    .van-dialog__confirm,
    .van-dialog__cancel {
-      height: @dialog-round-button-height;
+      height: var(--van-dialog-round-button-height);
    }

    .van-dialog__confirm {
-      color: @white;
+      color: var(--van-white);
    }
  }

--- a/src/dialog/var.less
+++ b/src/dialog/var.less
@ -2,20 +2,20 @@

@dialog-width: 320px;
@dialog-small-screen-width: 90%;
-@dialog-font-size: @font-size-lg;
-@dialog-transition: @animation-duration-base;
+@dialog-font-size: var(--van-font-size-lg);
+@dialog-transition: var(--van-animation-duration-base);
@dialog-border-radius: 16px;
-@dialog-background-color: @white;
-@dialog-header-font-weight: @font-weight-bold;
+@dialog-background-color: var(--van-white);
+@dialog-header-font-weight: var(--van-font-weight-bold);
@dialog-header-line-height: 24px;
@dialog-header-padding-top: 26px;
-@dialog-header-isolated-padding: @padding-lg 0;
-@dialog-message-padding: @padding-lg;
-@dialog-message-font-size: @font-size-md;
-@dialog-message-line-height: @line-height-md;
+@dialog-header-isolated-padding: var(--van-padding-lg) 0;
+@dialog-message-padding: var(--van-padding-lg);
+@dialog-message-font-size: var(--van-font-size-md);
+@dialog-message-line-height: var(--van-line-height-md);
@dialog-message-max-height: 60vh;
-@dialog-has-title-message-text-color: @gray-7;
-@dialog-has-title-message-padding-top: @padding-xs;
+@dialog-has-title-message-text-color: var(--van-gray-7);
+@dialog-has-title-message-padding-top: var(--van-padding-xs);
@dialog-button-height: 48px;
@dialog-round-button-height: 36px;
-@dialog-confirm-button-text-color: @red;
+@dialog-confirm-button-text-color: var(--van-red);
--- a/src/divider/index.less
+++ b/src/divider/index.less
@ -1,13 +1,24 @@
@import './var.less';

+:root {
+  --van-divider-margin: @divider-margin;
+  --van-divider-text-color: @divider-text-color;
+  --van-divider-font-size: @divider-font-size;
+  --van-divider-line-height: @divider-line-height;
+  --van-divider-border-color: @divider-border-color;
+  --van-divider-content-padding: @divider-content-padding;
+  --van-divider-content-left-width: @divider-content-left-width;
+  --van-divider-content-right-width: @divider-content-right-width;
+}
+
 .van-divider {
  display: flex;
  align-items: center;
-  margin: @divider-margin;
-  color: @divider-text-color;
-  font-size: @divider-font-size;
-  line-height: @divider-line-height;
-  border-color: @divider-border-color;
+  margin: var(--van-divider-margin);
+  color: var(--van-divider-text-color);
+  font-size: var(--van-divider-font-size);
+  line-height: var(--van-divider-line-height);
+  border-color: var(--van-divider-border-color);
  border-style: solid;
  border-width: 0;

@ -19,7 +30,7 @@
    height: 1px;
    border-color: inherit;
    border-style: inherit;
-    border-width: @border-width-base 0 0;
+    border-width: var(--van-border-width-base) 0 0;
  }

  &::before {
@ -41,24 +52,24 @@
  &--content-left,
  &--content-right {
    &::before {
-      margin-right: @divider-content-padding;
+      margin-right: var(--van-divider-content-padding);
    }

    &::after {
-      margin-left: @divider-content-padding;
+      margin-left: var(--van-divider-content-padding);
      content: '';
    }
  }

  &--content-left {
    &::before {
-      max-width: @divider-content-left-width;
+      max-width: var(--van-divider-content-left-width);
    }
  }

  &--content-right {
    &::after {
-      max-width: @divider-content-right-width;
+      max-width: var(--van-divider-content-right-width);
    }
  }
 }
--- a/src/divider/var.less
+++ b/src/divider/var.less
@ -1,10 +1,10 @@
@import '../style/var.less';

-@divider-margin: @padding-md 0;
-@divider-text-color: @gray-6;
-@divider-font-size: @font-size-md;
+@divider-margin: var(--van-padding-md) 0;
+@divider-text-color: var(--van-gray-6);
+@divider-font-size: var(--van-font-size-md);
@divider-line-height: 24px;
-@divider-border-color: @border-color;
-@divider-content-padding: @padding-md;
+@divider-border-color: var(--van-border-color);
+@divider-content-padding: var(--van-padding-md);
@divider-content-left-width: 10%;
@divider-content-right-width: 10%;
--- a/src/dropdown-item/index.less
+++ b/src/dropdown-item/index.less
@ -1,11 +1,15 @@
@import './var.less';
@import '../dropdown-menu/var.less';

+:root {
+  --van-dropdown-item-z-index: @dropdown-item-z-index;
+}
+
 .van-dropdown-item {
  position: fixed;
  right: 0;
  left: 0;
-  z-index: @dropdown-item-z-index;
+  z-index: var(--van-dropdown-item-z-index);
  overflow: hidden;

  &__icon {
@ -17,10 +21,10 @@
    text-align: left;

    &--active {
-      color: @dropdown-menu-option-active-color;
+      color: var(--van-dropdown-menu-option-active-color);

      .van-dropdown-item__icon {
-        color: @dropdown-menu-option-active-color;
+        color: var(--van-dropdown-menu-option-active-color);
      }
    }
  }
@ -35,6 +39,6 @@

  &__content {
    position: absolute;
-    max-height: @dropdown-menu-content-max-height;
+    max-height: var(--van-dropdown-menu-content-max-height);
  }
 }
--- a/src/dropdown-menu/index.less
+++ b/src/dropdown-menu/index.less
@ -1,18 +1,32 @@
@import './var.less';
@import '../dropdown-item/var.less';

+:root {
+  --van-dropdown-menu-height: @dropdown-menu-height;
+  --van-dropdown-menu-background-color: @dropdown-menu-background-color;
+  --van-dropdown-menu-box-shadow: @dropdown-menu-box-shadow;
+  --van-dropdown-menu-title-font-size: @dropdown-menu-title-font-size;
+  --van-dropdown-menu-title-text-color: @dropdown-menu-title-text-color;
+  --van-dropdown-menu-title-active-text-color: @dropdown-menu-title-active-text-color;
+  --van-dropdown-menu-title-disabled-text-color: @dropdown-menu-title-disabled-text-color;
+  --van-dropdown-menu-title-padding: @dropdown-menu-title-padding;
+  --van-dropdown-menu-title-line-height: @dropdown-menu-title-line-height;
+  --van-dropdown-menu-option-active-color: @dropdown-menu-option-active-color;
+  --van-dropdown-menu-content-max-height: @dropdown-menu-content-max-height;
+}
+
 .van-dropdown-menu {
  user-select: none;

  &__bar {
    position: relative;
    display: flex;
-    height: @dropdown-menu-height;
-    background-color: @dropdown-menu-background-color;
-    box-shadow: @dropdown-menu-box-shadow;
+    height: var(--van-dropdown-menu-height);
+    background-color: var(--van-dropdown-menu-background-color);
+    box-shadow: var(--van-dropdown-menu-box-shadow);

    &--opened {
-      z-index: @dropdown-item-z-index + 1;
+      z-index: calc(var(--van-dropdown-item-z-index) + 1);
    }
  }

@ -25,7 +39,7 @@
    cursor: pointer;

    &:active {
-      opacity: @active-opacity;
+      opacity: var(--van-active-opacity);
    }

    &--disabled {
@ -34,7 +48,7 @@
      }

      .van-dropdown-menu__title {
-        color: @dropdown-menu-title-disabled-text-color;
+        color: var(--van-dropdown-menu-title-disabled-text-color);
      }
    }
  }
@ -43,10 +57,10 @@
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
-    padding: @dropdown-menu-title-padding;
-    color: @dropdown-menu-title-text-color;
-    font-size: @dropdown-menu-title-font-size;
-    line-height: @dropdown-menu-title-line-height;
+    padding: var(--van-dropdown-menu-title-padding);
+    color: var(--van-dropdown-menu-title-text-color);
+    font-size: var(--van-dropdown-menu-title-font-size);
+    line-height: var(--van-dropdown-menu-title-line-height);

    &::after {
      position: absolute;
@ -54,14 +68,14 @@
      right: -4px;
      margin-top: -5px;
      border: 3px solid;
-      border-color: transparent transparent @gray-4 @gray-4;
+      border-color: transparent transparent var(--van-gray-4) var(--van-gray-4);
      transform: rotate(-45deg);
      opacity: 0.8;
      content: '';
    }

    &--active {
-      color: @dropdown-menu-title-active-text-color;
+      color: var(--van-dropdown-menu-title-active-text-color);

      &::after {
        border-color: transparent transparent currentColor currentColor;
--- a/src/dropdown-menu/var.less
+++ b/src/dropdown-menu/var.less
@ -1,13 +1,13 @@
@import '../style/var.less';

@dropdown-menu-height: 48px;
-@dropdown-menu-background-color: @white;
-@dropdown-menu-box-shadow: 0 2px 12px fade(@gray-7, 12);
+@dropdown-menu-background-color: var(--van-white);
+@dropdown-menu-box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
@dropdown-menu-title-font-size: 15px;
-@dropdown-menu-title-text-color: @text-color;
-@dropdown-menu-title-active-text-color: @red;
-@dropdown-menu-title-disabled-text-color: @gray-6;
-@dropdown-menu-title-padding: 0 @padding-xs;
-@dropdown-menu-title-line-height: @line-height-lg;
-@dropdown-menu-option-active-color: @red;
+@dropdown-menu-title-text-color: var(--van-text-color);
+@dropdown-menu-title-active-text-color: var(--van-red);
+@dropdown-menu-title-disabled-text-color: var(--van-gray-6);
+@dropdown-menu-title-padding: 0 var(--van-padding-xs);
+@dropdown-menu-title-line-height: var(--van-line-height-lg);
+@dropdown-menu-option-active-color: var(--van-red);
@dropdown-menu-content-max-height: 80%;
--- a/src/empty/index.less
+++ b/src/empty/index.less
@ -1,16 +1,27 @@
@import './var.less';

+:root {
+  --van-empty-padding: @empty-padding;
+  --van-empty-image-size: @empty-image-size;
+  --van-empty-description-margin-top: @empty-description-margin-top;
+  --van-empty-description-padding: @empty-description-padding;
+  --van-empty-description-color: @empty-description-color;
+  --van-empty-description-font-size: @empty-description-font-size;
+  --van-empty-description-line-height: @empty-description-line-height;
+  --van-empty-bottom-margin-top: @empty-bottom-margin-top;
+}
+
 .van-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
-  padding: @empty-padding;
+  padding: var(--van-empty-padding);

  &__image {
-    width: @empty-image-size;
-    height: @empty-image-size;
+    width: var(--van-empty-image-size);
+    height: var(--van-empty-image-size);

    img {
      width: 100%;
@ -19,14 +30,14 @@
  }

  &__description {
-    margin-top: @empty-description-margin-top;
-    padding: @empty-description-padding;
-    color: @empty-description-color;
-    font-size: @empty-description-font-size;
-    line-height: @empty-description-line-height;
+    margin-top: var(--van-empty-description-margin-top);
+    padding: var(--van-empty-description-padding);
+    color: var(--van-empty-description-color);
+    font-size: var(--van-empty-description-font-size);
+    line-height: var(--van-empty-description-line-height);
  }

  &__bottom {
-    margin-top: @empty-bottom-margin-top;
+    margin-top: var(--van-empty-bottom-margin-top);
  }
 }
--- a/src/empty/var.less
+++ b/src/empty/var.less
@ -1,10 +1,10 @@
@import '../style/var.less';

-@empty-padding: @padding-xl 0;
+@empty-padding: var(--van-padding-xl) 0;
@empty-image-size: 160px;
-@empty-description-margin-top: @padding-md;
+@empty-description-margin-top: var(--van-padding-md);
@empty-description-padding: 0 60px;
-@empty-description-color: @gray-6;
-@empty-description-font-size: @font-size-md;
-@empty-description-line-height: @line-height-md;
+@empty-description-color: var(--van-gray-6);
+@empty-description-font-size: var(--van-font-size-md);
+@empty-description-line-height: var(--van-line-height-md);
@empty-bottom-margin-top: 24px;
--- a/src/field/index.less
+++ b/src/field/index.less
@ -1,13 +1,34 @@
@import './var.less';
@import '../cell/var.less';

+:root {
+  --van-field-label-width: @field-label-width;
+  --van-field-label-color: @field-label-color;
+  --van-field-label-margin-right: @field-label-margin-right;
+  --van-field-input-text-color: @field-input-text-color;
+  --van-field-input-error-text-color: @field-input-error-text-color;
+  --van-field-input-disabled-text-color: @field-input-disabled-text-color;
+  --van-field-placeholder-text-color: @field-placeholder-text-color;
+  --van-field-icon-size: @field-icon-size;
+  --van-field-clear-icon-size: @field-clear-icon-size;
+  --van-field-clear-icon-color: @field-clear-icon-color;
+  --van-field-right-icon-color: @field-right-icon-color;
+  --van-field-error-message-color: @field-error-message-color;
+  --van-field-error-message-text-color: @field-error-message-text-color;
+  --van-field-text-area-min-height: @field-text-area-min-height;
+  --van-field-word-limit-color: @field-word-limit-color;
+  --van-field-word-limit-font-size: @field-word-limit-font-size;
+  --van-field-word-limit-line-height: @field-word-limit-line-height;
+  --van-field-disabled-text-color: @field-disabled-text-color;
+}
+
 .van-field {
  &__label {
    flex: none;
    box-sizing: border-box;
-    width: @field-label-width;
-    margin-right: @field-label-margin-right;
-    color: @field-label-color;
+    width: var(--van-field-label-width);
+    margin-right: var(--van-field-label-margin-right);
+    color: var(--van-field-label-color);
    text-align: left;
    word-wrap: break-word;

@ -22,7 +43,7 @@

  &--disabled {
    .van-field__label {
-      color: @field-disabled-text-color;
+      color: var(--van-field-disabled-text-color);
    }
  }

@ -42,7 +63,7 @@
    min-width: 0; // for flex-shrink in field__button
    margin: 0;
    padding: 0;
-    color: @field-input-text-color;
+    color: var(--van-field-input-text-color);
    line-height: inherit;
    text-align: left;
    background-color: transparent;
@ -50,15 +71,15 @@
    resize: none;

    &::placeholder {
-      color: @field-placeholder-text-color;
+      color: var(--van-field-placeholder-text-color);
    }

    &:disabled {
-      color: @field-input-disabled-text-color;
+      color: var(--van-field-input-disabled-text-color);
      cursor: not-allowed;
      opacity: 1;
      // fix disabled color in mobile safari
-      -webkit-text-fill-color: @field-input-disabled-text-color;
+      -webkit-text-fill-color: var(--van-field-input-disabled-text-color);
    }

    &:read-only {
@ -78,14 +99,14 @@
    &--custom {
      display: flex;
      align-items: center;
-      min-height: @cell-line-height;
+      min-height: var(--van-cell-line-height);
    }

    // for ios wechat
    &[type='date'],
    &[type='time'],
    &[type='datetime-local'] {
-      min-height: @cell-line-height;
+      min-height: var(--van-cell-line-height);
    }

    // for safari
@ -103,39 +124,39 @@

  &__clear,
  &__right-icon {
-    margin-right: -@padding-xs;
-    padding: 0 @padding-xs;
+    margin-right: -var(--van-padding-xs);
+    padding: 0 var(--van-padding-xs);
    line-height: inherit;
  }

  &__clear {
-    color: @field-clear-icon-color;
-    font-size: @field-clear-icon-size;
+    color: var(--van-field-clear-icon-color);
+    font-size: var(--van-field-clear-icon-size);
    cursor: pointer;
  }

  &__left-icon .van-icon,
  &__right-icon .van-icon {
    display: block;
-    font-size: @field-icon-size;
+    font-size: var(--van-field-icon-size);
    line-height: inherit;
  }

  &__left-icon {
-    margin-right: @padding-base;
+    margin-right: var(--van-padding-base);
  }

  &__right-icon {
-    color: @field-right-icon-color;
+    color: var(--van-field-right-icon-color);
  }

  &__button {
-    padding-left: @padding-xs;
+    padding-left: var(--van-padding-xs);
  }

  &__error-message {
-    color: @field-error-message-color;
-    font-size: @field-error-message-text-color;
+    color: var(--van-field-error-message-color);
+    font-size: var(--van-field-error-message-text-color);
    text-align: left;

    &--center {
@ -148,10 +169,10 @@
  }

  &__word-limit {
-    margin-top: @padding-base;
-    color: @field-word-limit-color;
-    font-size: @field-word-limit-font-size;
-    line-height: @field-word-limit-line-height;
+    margin-top: var(--van-padding-base);
+    color: var(--van-field-word-limit-color);
+    font-size: var(--van-field-word-limit-font-size);
+    line-height: var(--van-field-word-limit-line-height);
    text-align: right;
  }

@ -159,7 +180,7 @@
    .van-field__control {
      &,
      &::placeholder {
-        color: @field-input-error-text-color;
+        color: var(--van-field-input-error-text-color);
        -webkit-text-fill-color: currentColor;
      }
    }
@ -167,7 +188,7 @@

  &--min-height {
    .van-field__control {
-      min-height: @field-text-area-min-height;
+      min-height: var(--van-field-text-area-min-height);
    }
  }
 }
--- a/src/field/var.less
+++ b/src/field/var.less
@ -1,20 +1,20 @@
@import '../style/var.less';

@field-label-width: 6.2em;
-@field-label-color: @gray-7;
-@field-label-margin-right: @padding-sm;
-@field-input-text-color: @text-color;
-@field-input-error-text-color: @red;
-@field-input-disabled-text-color: @gray-5;
-@field-placeholder-text-color: @gray-5;
+@field-label-color: var(--van-gray-7);
+@field-label-margin-right: var(--van-padding-sm);
+@field-input-text-color: var(--van-text-color);
+@field-input-error-text-color: var(--van-red);
+@field-input-disabled-text-color: var(--van-gray-5);
+@field-placeholder-text-color: var(--van-gray-5);
@field-icon-size: 16px;
@field-clear-icon-size: 16px;
-@field-clear-icon-color: @gray-5;
-@field-right-icon-color: @gray-6;
-@field-error-message-color: @red;
+@field-clear-icon-color: var(--van-gray-5);
+@field-right-icon-color: var(--van-gray-6);
+@field-error-message-color: var(--van-red);
@field-error-message-text-color: 12px;
@field-text-area-min-height: 60px;
-@field-word-limit-color: @gray-7;
-@field-word-limit-font-size: @font-size-sm;
+@field-word-limit-color: var(--van-gray-7);
+@field-word-limit-font-size: var(--van-font-size-sm);
@field-word-limit-line-height: 16px;
-@field-disabled-text-color: @gray-5;
+@field-disabled-text-color: var(--van-gray-5);
--- a/src/grid-item/index.less
+++ b/src/grid-item/index.less
@ -1,5 +1,14 @@
@import './var.less';

+:root {
+  --van-grid-item-content-padding: @grid-item-content-padding;
+  --van-grid-item-content-background-color: @grid-item-content-background-color;
+  --van-grid-item-content-active-color: @grid-item-content-active-color;
+  --van-grid-item-icon-size: @grid-item-icon-size;
+  --van-grid-item-text-color: @grid-item-text-color;
+  --van-grid-item-text-font-size: @grid-item-text-font-size;
+}
+
 .van-grid-item {
  position: relative;
  box-sizing: border-box;
@ -9,19 +18,19 @@
  }

  &__icon {
-    font-size: @grid-item-icon-size;
+    font-size: var(--van-grid-item-icon-size);
  }

  &__text {
-    color: @grid-item-text-color;
-    font-size: @grid-item-text-font-size;
+    color: var(--van-grid-item-text-color);
+    font-size: var(--van-grid-item-text-font-size);
    line-height: 1.5;
    // https://github.com/youzan/vant/issues/3894
    word-break: break-all;
  }

  &__icon + &__text {
-    margin-top: @padding-xs;
+    margin-top: var(--van-padding-xs);
  }

  &__content {
@ -29,12 +38,13 @@
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
-    padding: @grid-item-content-padding;
-    background-color: @grid-item-content-background-color;
+    padding: var(--van-grid-item-content-padding);
+    background-color: var(--van-grid-item-content-background-color);

    &::after {
      z-index: 1;
-      border-width: 0 @border-width-base @border-width-base 0;
+      border-width: 0 var(--van-border-width-base) var(--van-border-width-base)
+        0;
    }

    &--square {
@ -54,13 +64,13 @@

      .van-grid-item__icon + .van-grid-item__text {
        margin-top: 0;
-        margin-left: @padding-xs;
+        margin-left: var(--van-padding-xs);
      }
    }

    &--surround {
      &::after {
-        border-width: @border-width-base;
+        border-width: var(--van-border-width-base);
      }
    }

@ -68,7 +78,7 @@
      cursor: pointer;

      &:active {
-        background-color: @grid-item-content-active-color;
+        background-color: var(--van-grid-item-content-active-color);
      }
    }
  }
--- a/src/grid-item/var.less
+++ b/src/grid-item/var.less
@ -1,8 +1,8 @@
@import '../style/var.less';

-@grid-item-content-padding: @padding-md @padding-xs;
-@grid-item-content-background-color: @white;
-@grid-item-content-active-color: @active-color;
+@grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
+@grid-item-content-background-color: var(--van-white);
+@grid-item-content-active-color: var(--van-active-color);
@grid-item-icon-size: 28px;
-@grid-item-text-color: @gray-7;
-@grid-item-text-font-size: @font-size-sm;
+@grid-item-text-color: var(--van-gray-7);
+@grid-item-text-font-size: var(--van-font-size-sm);
--- a/src/image-preview/index.less
+++ b/src/image-preview/index.less
@ -1,5 +1,18 @@
@import './var.less';

+:root {
+  --van-image-preview-index-text-color: @image-preview-index-text-color;
+  --van-image-preview-index-font-size: @image-preview-index-font-size;
+  --van-image-preview-index-line-height: @image-preview-index-line-height;
+  --van-image-preview-index-text-shadow: @image-preview-index-text-shadow;
+  --van-image-preview-overlay-background-color: @image-preview-overlay-background-color;
+  --van-image-preview-close-icon-size: @image-preview-close-icon-size;
+  --van-image-preview-close-icon-color: @image-preview-close-icon-color;
+  --van-image-preview-close-icon-active-color: @image-preview-close-icon-active-color;
+  --van-image-preview-close-icon-margin: @image-preview-close-icon-margin;
+  --van-image-preview-close-icon-z-index: @image-preview-close-icon-z-index;
+}
+
 .van-image-preview {
  position: fixed;
  top: 0;
@ -58,48 +71,48 @@

  &__index {
    position: absolute;
-    top: @padding-md;
+    top: var(--van-padding-md);
    left: 50%;
-    color: @image-preview-index-text-color;
-    font-size: @image-preview-index-font-size;
-    line-height: @image-preview-index-line-height;
-    text-shadow: @image-preview-index-text-shadow;
+    color: var(--van-image-preview-index-text-color);
+    font-size: var(--van-image-preview-index-font-size);
+    line-height: var(--van-image-preview-index-line-height);
+    text-shadow: var(--van-image-preview-index-text-shadow);
    transform: translate(-50%, 0);
  }

  &__overlay {
-    background-color: @image-preview-overlay-background-color;
+    background-color: var(--van-image-preview-overlay-background-color);
  }

  &__close-icon {
    position: absolute;
-    z-index: @image-preview-close-icon-z-index;
-    color: @image-preview-close-icon-color;
-    font-size: @image-preview-close-icon-size;
+    z-index: var(--van-image-preview-close-icon-z-index);
+    color: var(--van-image-preview-close-icon-color);
+    font-size: var(--van-image-preview-close-icon-size);
    cursor: pointer;

    &:active {
-      color: @image-preview-close-icon-active-color;
+      color: var(--van-image-preview-close-icon-active-color);
    }

    &--top-left {
-      top: @image-preview-close-icon-margin;
-      left: @image-preview-close-icon-margin;
+      top: var(--van-image-preview-close-icon-margin);
+      left: var(--van-image-preview-close-icon-margin);
    }

    &--top-right {
-      top: @image-preview-close-icon-margin;
-      right: @image-preview-close-icon-margin;
+      top: var(--van-image-preview-close-icon-margin);
+      right: var(--van-image-preview-close-icon-margin);
    }

    &--bottom-left {
-      bottom: @image-preview-close-icon-margin;
-      left: @image-preview-close-icon-margin;
+      bottom: var(--van-image-preview-close-icon-margin);
+      left: var(--van-image-preview-close-icon-margin);
    }

    &--bottom-right {
-      right: @image-preview-close-icon-margin;
-      bottom: @image-preview-close-icon-margin;
+      right: var(--van-image-preview-close-icon-margin);
+      bottom: var(--van-image-preview-close-icon-margin);
    }
  }
 }
--- a/src/image-preview/var.less
+++ b/src/image-preview/var.less
@ -1,12 +1,12 @@
@import '../style/var.less';

-@image-preview-index-text-color: @white;
-@image-preview-index-font-size: @font-size-md;
-@image-preview-index-line-height: @line-height-md;
-@image-preview-index-text-shadow: 0 1px 1px @gray-8;
+@image-preview-index-text-color: var(--van-white);
+@image-preview-index-font-size: var(--van-font-size-md);
+@image-preview-index-line-height: var(--van-line-height-md);
+@image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);
@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
@image-preview-close-icon-size: 22px;
-@image-preview-close-icon-color: @gray-5;
-@image-preview-close-icon-active-color: @gray-6;
-@image-preview-close-icon-margin: @padding-md;
+@image-preview-close-icon-color: var(--van-gray-5);
+@image-preview-close-icon-active-color: var(--van-gray-6);
+@image-preview-close-icon-margin: var(--van-padding-md);
@image-preview-close-icon-z-index: 1;
--- a/src/image/index.less
+++ b/src/image/index.less
@ -1,5 +1,15 @@
@import './var.less';

+:root {
+  --van-image-placeholder-text-color: @image-placeholder-text-color;
+  --van-image-placeholder-font-size: @image-placeholder-font-size;
+  --van-image-placeholder-background-color: @image-placeholder-background-color;
+  --van-image-loading-icon-size: @image-loading-icon-size;
+  --van-image-loading-icon-color: @image-loading-icon-color;
+  --van-image-error-icon-size: @image-error-icon-size;
+  --van-image-error-icon-color: @image-error-icon-color;
+}
+
 .van-image {
  position: relative;
  display: inline-block;
@ -30,18 +40,18 @@
    flex-direction: column;
    align-items: center;
    justify-content: center;
-    color: @image-placeholder-text-color;
-    font-size: @image-placeholder-font-size;
-    background-color: @image-placeholder-background-color;
+    color: var(--van-image-placeholder-text-color);
+    font-size: var(--van-image-placeholder-font-size);
+    background-color: var(--van-image-placeholder-background-color);
  }

  &__loading-icon {
-    color: @image-loading-icon-color;
-    font-size: @image-loading-icon-size;
+    color: var(--van-image-loading-icon-color);
+    font-size: var(--van-image-loading-icon-size);
  }

  &__error-icon {
-    color: @image-error-icon-color;
-    font-size: @image-error-icon-size;
+    color: var(--van-image-error-icon-color);
+    font-size: var(--van-image-error-icon-size);
  }
 }
--- a/src/image/var.less
+++ b/src/image/var.less
@ -1,9 +1,9 @@
@import '../style/var.less';

-@image-placeholder-text-color: @gray-6;
-@image-placeholder-font-size: @font-size-md;
-@image-placeholder-background-color: @background-color;
+@image-placeholder-text-color: var(--van-gray-6);
+@image-placeholder-font-size: var(--van-font-size-md);
+@image-placeholder-background-color: var(--van-background-color);
@image-loading-icon-size: 32px;
-@image-loading-icon-color: @gray-4;
+@image-loading-icon-color: var(--van-gray-4);
@image-error-icon-size: 32px;
-@image-error-icon-color: @gray-4;
+@image-error-icon-color: var(--van-gray-4);
--- a/src/index-anchor/index.less
+++ b/src/index-anchor/index.less
@ -1,21 +1,33 @@
@import './var.less';

+:root {
+  --van-index-anchor-z-index: @index-anchor-z-index;
+  --van-index-anchor-padding: @index-anchor-padding;
+  --van-index-anchor-text-color: @index-anchor-text-color;
+  --van-index-anchor-font-weight: @index-anchor-font-weight;
+  --van-index-anchor-font-size: @index-anchor-font-size;
+  --van-index-anchor-line-height: @index-anchor-line-height;
+  --van-index-anchor-background-color: @index-anchor-background-color;
+  --van-index-anchor-sticky-text-color: @index-anchor-sticky-text-color;
+  --van-index-anchor-sticky-background-color: @index-anchor-sticky-background-color;
+}
+
 .van-index-anchor {
-  z-index: @index-anchor-z-index;
+  z-index: var(--van-index-anchor-z-index);
  box-sizing: border-box;
-  padding: @index-anchor-padding;
-  color: @index-anchor-text-color;
-  font-weight: @index-anchor-font-weight;
-  font-size: @index-anchor-font-size;
-  line-height: @index-anchor-line-height;
-  background-color: @index-anchor-background-color;
+  padding: var(--van-index-anchor-padding);
+  color: var(--van-index-anchor-text-color);
+  font-weight: var(--van-index-anchor-font-weight);
+  font-size: var(--van-index-anchor-font-size);
+  line-height: var(--van-index-anchor-line-height);
+  background-color: var(--van-index-anchor-background-color);

  &--sticky {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
-    color: @index-anchor-sticky-text-color;
-    background-color: @index-anchor-sticky-background-color;
+    color: var(--van-index-anchor-sticky-text-color);
+    background-color: var(--van-index-anchor-sticky-background-color);
  }
 }
--- a/src/index-anchor/var.less
+++ b/src/index-anchor/var.less
@ -1,11 +1,11 @@
@import '../style/var.less';

@index-anchor-z-index: 1;
-@index-anchor-padding: 0 @padding-md;
-@index-anchor-text-color: @text-color;
-@index-anchor-font-weight: @font-weight-bold;
-@index-anchor-font-size: @font-size-md;
+@index-anchor-padding: 0 var(--van-padding-md);
+@index-anchor-text-color: var(--van-text-color);
+@index-anchor-font-weight: var(--van-font-weight-bold);
+@index-anchor-font-size: var(--van-font-size-md);
@index-anchor-line-height: 32px;
@index-anchor-background-color: transparent;
-@index-anchor-sticky-text-color: @red;
-@index-anchor-sticky-background-color: @white;
+@index-anchor-sticky-text-color: var(--van-red);
+@index-anchor-sticky-background-color: var(--van-white);
--- a/src/index-bar/index.less
+++ b/src/index-bar/index.less
@ -1,11 +1,18 @@
@import './var.less';

+:root {
+  --van-index-bar-sidebar-z-index: @index-bar-sidebar-z-index;
+  --van-index-bar-index-font-size: @index-bar-index-font-size;
+  --van-index-bar-index-line-height: @index-bar-index-line-height;
+  --van-index-bar-index-active-color: @index-bar-index-active-color;
+}
+
 .van-index-bar {
  &__sidebar {
    position: fixed;
    top: 50%;
    right: 0;
-    z-index: @index-bar-sidebar-z-index;
+    z-index: var(--van-index-bar-sidebar-z-index);
    display: flex;
    flex-direction: column;
    text-align: center;
@ -15,13 +22,13 @@
  }

  &__index {
-    padding: 0 @padding-xs 0 @padding-md;
-    font-weight: @font-weight-bold;
-    font-size: @index-bar-index-font-size;
-    line-height: @index-bar-index-line-height;
+    padding: 0 var(--van-padding-xs) 0 var(--van-padding-md);
+    font-weight: var(--van-font-weight-bold);
+    font-size: var(--van-index-bar-index-font-size);
+    line-height: var(--van-index-bar-index-line-height);

    &--active {
-      color: @index-bar-index-active-color;
+      color: var(--van-index-bar-index-active-color);
    }
  }
 }
--- a/src/index-bar/var.less
+++ b/src/index-bar/var.less
@ -1,6 +1,6 @@
@import '../style/var.less';

@index-bar-sidebar-z-index: 2;
-@index-bar-index-font-size: @font-size-xs;
-@index-bar-index-line-height: @line-height-xs;
-@index-bar-index-active-color: @red;
+@index-bar-index-font-size: var(--van-font-size-xs);
+@index-bar-index-line-height: var(--van-line-height-xs);
+@index-bar-index-active-color: var(--van-red);
--- a/src/list/index.less
+++ b/src/list/index.less
@ -1,12 +1,19 @@
@import './var.less';

+:root {
+  --van-list-text-color: @list-text-color;
+  --van-list-text-font-size: @list-text-font-size;
+  --van-list-text-line-height: @list-text-line-height;
+  --van-list-loading-icon-size: @list-loading-icon-size;
+}
+
 .van-list {
  &__loading,
  &__finished-text,
  &__error-text {
-    color: @list-text-color;
-    font-size: @list-text-font-size;
-    line-height: @list-text-line-height;
+    color: var(--van-list-text-color);
+    font-size: var(--van-list-text-font-size);
+    line-height: var(--van-list-text-line-height);
    text-align: center;
  }

@ -17,8 +24,8 @@

  &__loading-icon {
    .van-loading__spinner {
-      width: @list-loading-icon-size;
-      height: @list-loading-icon-size;
+      width: var(--van-list-loading-icon-size);
+      height: var(--van-list-loading-icon-size);
    }
  }
 }
--- a/src/list/var.less
+++ b/src/list/var.less
@ -1,6 +1,6 @@
@import '../style/var.less';

-@list-text-color: @gray-6;
-@list-text-font-size: @font-size-md;
+@list-text-color: var(--van-gray-6);
+@list-text-font-size: var(--van-font-size-md);
@list-text-line-height: 50px;
@list-loading-icon-size: 16px;
--- a/src/loading/index.less
+++ b/src/loading/index.less
@ -1,21 +1,30 @@
@import './var.less';

+:root {
+  --van-loading-text-color: @loading-text-color;
+  --van-loading-text-font-size: @loading-text-font-size;
+  --van-loading-spinner-color: @loading-spinner-color;
+  --van-loading-spinner-size: @loading-spinner-size;
+  --van-loading-spinner-animation-duration: @loading-spinner-animation-duration;
+}
+
 .van-loading {
  position: relative;
-  color: @loading-spinner-color;
+  color: var(--van-loading-spinner-color);
  font-size: 0;
  vertical-align: middle;

  &__spinner {
    position: relative;
    display: inline-block;
-    width: @loading-spinner-size;
+    width: var(--van-loading-spinner-size);
    // compatible for 1.x, users may set width or height in root element
    max-width: 100%;
-    height: @loading-spinner-size;
+    height: var(--van-loading-spinner-size);
    max-height: 100%;
    vertical-align: middle;
-    animation: van-rotate @loading-spinner-animation-duration linear infinite;
+    animation: van-rotate var(--van-loading-spinner-animation-duration) linear
+      infinite;

    &--spinner {
      animation-timing-function: steps(12);
@ -59,9 +68,9 @@

  &__text {
    display: inline-block;
-    margin-left: @padding-xs;
-    color: @loading-text-color;
-    font-size: @loading-text-font-size;
+    margin-left: var(--van-padding-xs);
+    color: var(--van-loading-text-color);
+    font-size: var(--van-loading-text-font-size);
    vertical-align: middle;
  }

@ -71,7 +80,7 @@
    align-items: center;

    .van-loading__text {
-      margin: @padding-xs 0 0;
+      margin: var(--van-padding-xs) 0 0;
    }
  }
 }
--- a/src/loading/var.less
+++ b/src/loading/var.less
@ -1,7 +1,7 @@
@import '../style/var.less';

-@loading-text-color: @gray-6;
-@loading-text-font-size: @font-size-md;
-@loading-spinner-color: @gray-5;
+@loading-text-color: var(--van-gray-6);
+@loading-text-font-size: var(--van-font-size-md);
+@loading-spinner-color: var(--van-gray-5);
@loading-spinner-size: 30px;
@loading-spinner-animation-duration: 0.8s;
--- a/src/nav-bar/index.less
+++ b/src/nav-bar/index.less
@ -1,11 +1,22 @@
@import './var.less';

+:root {
+  --van-nav-bar-height: @nav-bar-height;
+  --van-nav-bar-background-color: @nav-bar-background-color;
+  --van-nav-bar-arrow-size: @nav-bar-arrow-size;
+  --van-nav-bar-icon-color: @nav-bar-icon-color;
+  --van-nav-bar-text-color: @nav-bar-text-color;
+  --van-nav-bar-title-font-size: @nav-bar-title-font-size;
+  --van-nav-bar-title-text-color: @nav-bar-title-text-color;
+  --van-nav-bar-z-index: @nav-bar-z-index;
+}
+
 .van-nav-bar {
  position: relative;
-  z-index: @nav-bar-z-index;
-  line-height: @line-height-lg;
+  z-index: var(--van-nav-bar-z-index);
+  line-height: var(--van-line-height-lg);
  text-align: center;
-  background-color: @nav-bar-background-color;
+  background-color: var(--van-nav-bar-background-color);
  user-select: none;

  &--fixed {
@ -21,27 +32,27 @@
  }

  .van-icon {
-    color: @nav-bar-icon-color;
+    color: var(--van-nav-bar-icon-color);
  }

  &__content {
    position: relative;
    display: flex;
    align-items: center;
-    height: @nav-bar-height;
+    height: var(--van-nav-bar-height);
  }

  &__arrow {
-    margin-right: @padding-base;
-    font-size: @nav-bar-arrow-size;
+    margin-right: var(--van-padding-base);
+    font-size: var(--van-nav-bar-arrow-size);
  }

  &__title {
    max-width: 60%;
    margin: 0 auto;
-    color: @nav-bar-title-text-color;
-    font-weight: @font-weight-bold;
-    font-size: @nav-bar-title-font-size;
+    color: var(--van-nav-bar-title-text-color);
+    font-weight: var(--van-font-weight-bold);
+    font-size: var(--van-nav-bar-title-font-size);
  }

  &__left,
@ -51,12 +62,12 @@
    bottom: 0;
    display: flex;
    align-items: center;
-    padding: 0 @padding-md;
-    font-size: @font-size-md;
+    padding: 0 var(--van-padding-md);
+    font-size: var(--van-font-size-md);
    cursor: pointer;

    &:active {
-      opacity: @active-opacity;
+      opacity: var(--van-active-opacity);
    }
  }

@ -69,6 +80,6 @@
  }

  &__text {
-    color: @nav-bar-text-color;
+    color: var(--van-nav-bar-text-color);
  }
 }
--- a/src/nav-bar/var.less
+++ b/src/nav-bar/var.less
@ -1,10 +1,10 @@
@import '../style/var.less';

@nav-bar-height: 46px;
-@nav-bar-background-color: @white;
+@nav-bar-background-color: var(--van-white);
@nav-bar-arrow-size: 16px;
-@nav-bar-icon-color: @blue;
-@nav-bar-text-color: @blue;
-@nav-bar-title-font-size: @font-size-lg;
-@nav-bar-title-text-color: @text-color;
+@nav-bar-icon-color: var(--van-blue);
+@nav-bar-text-color: var(--van-blue);
+@nav-bar-title-font-size: var(--van-font-size-lg);
+@nav-bar-title-text-color: var(--van-text-color);
@nav-bar-z-index: 1;
--- a/src/notice-bar/index.less
+++ b/src/notice-bar/index.less
@ -1,20 +1,32 @@
@import './var.less';

+:root {
+  --van-notice-bar-height: @notice-bar-height;
+  --van-notice-bar-padding: @notice-bar-padding;
+  --van-notice-bar-wrapable-padding: @notice-bar-wrapable-padding;
+  --van-notice-bar-text-color: @notice-bar-text-color;
+  --van-notice-bar-font-size: @notice-bar-font-size;
+  --van-notice-bar-line-height: @notice-bar-line-height;
+  --van-notice-bar-background-color: @notice-bar-background-color;
+  --van-notice-bar-icon-size: @notice-bar-icon-size;
+  --van-notice-bar-icon-min-width: @notice-bar-icon-min-width;
+}
+
 .van-notice-bar {
  position: relative;
  display: flex;
  align-items: center;
-  height: @notice-bar-height;
-  padding: @notice-bar-padding;
-  color: @notice-bar-text-color;
-  font-size: @notice-bar-font-size;
-  line-height: @notice-bar-line-height;
-  background-color: @notice-bar-background-color;
+  height: var(--van-notice-bar-height);
+  padding: var(--van-notice-bar-padding);
+  color: var(--van-notice-bar-text-color);
+  font-size: var(--van-notice-bar-font-size);
+  line-height: var(--van-notice-bar-line-height);
+  background-color: var(--van-notice-bar-background-color);

  &__left-icon,
  &__right-icon {
-    min-width: @notice-bar-icon-min-width;
-    font-size: @notice-bar-icon-size;
+    min-width: var(--van-notice-bar-icon-min-width);
+    font-size: var(--van-notice-bar-icon-size);
  }

  &__right-icon {
@ -43,7 +55,7 @@

  &--wrapable {
    height: auto;
-    padding: @notice-bar-wrapable-padding;
+    padding: var(--van-notice-bar-wrapable-padding);

    .van-notice-bar {
      &__wrap {
--- a/src/notice-bar/var.less
+++ b/src/notice-bar/var.less
@ -1,11 +1,11 @@
@import '../style/var.less';

@notice-bar-height: 40px;
-@notice-bar-padding: 0 @padding-md;
-@notice-bar-wrapable-padding: @padding-xs @padding-md;
-@notice-bar-text-color: @orange-dark;
-@notice-bar-font-size: @font-size-md;
+@notice-bar-padding: 0 var(--van-padding-md);
+@notice-bar-wrapable-padding: var(--van-padding-xs) var(--van-padding-md);
+@notice-bar-text-color: var(--van-orange-dark);
+@notice-bar-font-size: var(--van-font-size-md);
@notice-bar-line-height: 24px;
-@notice-bar-background-color: @orange-light;
+@notice-bar-background-color: var(--van-orange-light);
@notice-bar-icon-size: 16px;
@notice-bar-icon-min-width: 24px;
--- a/src/notify/index.less
+++ b/src/notify/index.less
@ -1,33 +1,44 @@
@import './var.less';

+:root {
+  --van-notify-text-color: @notify-text-color;
+  --van-notify-padding: @notify-padding;
+  --van-notify-font-size: @notify-font-size;
+  --van-notify-line-height: @notify-line-height;
+  --van-notify-primary-background-color: @notify-primary-background-color;
+  --van-notify-success-background-color: @notify-success-background-color;
+  --van-notify-danger-background-color: @notify-danger-background-color;
+  --van-notify-warning-background-color: @notify-warning-background-color;
+}
+
 .van-notify {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
-  padding: @notify-padding;
-  color: @notify-text-color;
-  font-size: @notify-font-size;
-  line-height: @notify-line-height;
+  padding: var(--van-notify-padding);
+  color: var(--van-notify-text-color);
+  font-size: var(--van-notify-font-size);
+  line-height: var(--van-notify-line-height);

-  // allow newline charactor
+  // allow newline character
  white-space: pre-wrap;
  text-align: center;
  word-wrap: break-word;

  &--primary {
-    background-color: @notify-primary-background-color;
+    background-color: var(--van-notify-primary-background-color);
  }

  &--success {
-    background-color: @notify-success-background-color;
+    background-color: var(--van-notify-success-background-color);
  }

  &--danger {
-    background-color: @notify-danger-background-color;
+    background-color: var(--van-notify-danger-background-color);
  }

  &--warning {
-    background-color: @notify-warning-background-color;
+    background-color: var(--van-notify-warning-background-color);
  }
 }
--- a/src/notify/var.less
+++ b/src/notify/var.less
@ -1,10 +1,10 @@
@import '../style/var.less';

-@notify-text-color: @white;
-@notify-padding: @padding-xs @padding-md;
-@notify-font-size: @font-size-md;
-@notify-line-height: @line-height-md;
-@notify-primary-background-color: @blue;
-@notify-success-background-color: @green;
-@notify-danger-background-color: @red;
-@notify-warning-background-color: @orange;
+@notify-text-color: var(--van-white);
+@notify-padding: var(--van-padding-xs) var(--van-padding-md);
+@notify-font-size: var(--van-font-size-md);
+@notify-line-height: var(--van-line-height-md);
+@notify-primary-background-color: var(--van-blue);
+@notify-success-background-color: var(--van-green);
+@notify-danger-background-color: var(--van-red);
+@notify-warning-background-color: var(--van-orange);
--- a/src/number-keyboard/index.less
+++ b/src/number-keyboard/index.less
@ -1,13 +1,30 @@
@import './var.less';

+:root {
+  --van-number-keyboard-background-color: @number-keyboard-background-color;
+  --van-number-keyboard-key-height: @number-keyboard-key-height;
+  --van-number-keyboard-key-font-size: @number-keyboard-key-font-size;
+  --van-number-keyboard-key-active-color: @number-keyboard-key-active-color;
+  --van-number-keyboard-delete-font-size: @number-keyboard-delete-font-size;
+  --van-number-keyboard-title-color: @number-keyboard-title-color;
+  --van-number-keyboard-title-height: @number-keyboard-title-height;
+  --van-number-keyboard-title-font-size: @number-keyboard-title-font-size;
+  --van-number-keyboard-close-padding: @number-keyboard-close-padding;
+  --van-number-keyboard-close-color: @number-keyboard-close-color;
+  --van-number-keyboard-close-font-size: @number-keyboard-close-font-size;
+  --van-number-keyboard-button-text-color: @number-keyboard-button-text-color;
+  --van-number-keyboard-button-background-color: @number-keyboard-button-background-color;
+  --van-number-keyboard-z-index: @number-keyboard-z-index;
+}
+
 .van-number-keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
-  z-index: @number-keyboard-z-index;
+  z-index: var(--van-number-keyboard-z-index);
  width: 100%;
  padding-bottom: 22px;
-  background-color: @number-keyboard-background-color;
+  background-color: var(--van-number-keyboard-background-color);
  user-select: none;

  &--with-title {
@ -20,10 +37,10 @@
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
-    height: @number-keyboard-title-height;
+    height: var(--van-number-keyboard-title-height);
    padding-top: 6px;
-    color: @number-keyboard-title-color;
-    font-size: @number-keyboard-title-font-size;
+    color: var(--van-number-keyboard-title-color);
+    font-size: var(--van-number-keyboard-title-font-size);
  }

  &__title {
@ -51,15 +68,15 @@
    position: absolute;
    right: 0;
    height: 100%;
-    padding: @number-keyboard-close-padding;
-    color: @number-keyboard-close-color;
-    font-size: @number-keyboard-close-font-size;
+    padding: var(--van-number-keyboard-close-padding);
+    color: var(--van-number-keyboard-close-color);
+    font-size: var(--van-number-keyboard-close-font-size);
    background-color: transparent;
    border: none;
    cursor: pointer;

    &:active {
-      opacity: @active-opacity;
+      opacity: var(--van-active-opacity);
    }
  }

@ -78,11 +95,11 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  height: @number-keyboard-key-height;
-  font-size: @number-keyboard-key-font-size;
+  height: var(--van-number-keyboard-key-height);
+  font-size: var(--van-number-keyboard-key-font-size);
  line-height: 1.5;
-  background-color: @white;
-  border-radius: @border-radius-lg;
+  background-color: var(--van-white);
+  border-radius: var(--van-border-radius-lg);
  cursor: pointer;

  &--large {
@ -98,19 +115,19 @@

  &--blue,
  &--delete {
-    font-size: @number-keyboard-delete-font-size;
+    font-size: var(--van-number-keyboard-delete-font-size);
  }

  &--active {
-    background-color: @number-keyboard-key-active-color;
+    background-color: var(--van-number-keyboard-key-active-color);
  }

  &--blue {
-    color: @number-keyboard-button-text-color;
-    background-color: @number-keyboard-button-background-color;
+    color: var(--van-number-keyboard-button-text-color);
+    background-color: var(--van-number-keyboard-button-background-color);

    &.van-key--active {
-      background-color: darken(@number-keyboard-button-background-color, 10%);
+      opacity: var(--van-active-opacity);
    }
  }

@ -137,6 +154,6 @@
  }

  &__loading-icon {
-    color: @number-keyboard-button-text-color;
+    color: var(--van-number-keyboard-button-text-color);
  }
 }
--- a/src/number-keyboard/var.less
+++ b/src/number-keyboard/var.less
@ -1,16 +1,16 @@
@import '../style/var.less';

-@number-keyboard-background-color: @gray-2;
+@number-keyboard-background-color: var(--van-gray-2);
@number-keyboard-key-height: 48px;
@number-keyboard-key-font-size: 28px;
-@number-keyboard-key-active-color: @gray-3;
-@number-keyboard-delete-font-size: @font-size-lg;
-@number-keyboard-title-color: @gray-7;
+@number-keyboard-key-active-color: var(--van-gray-3);
+@number-keyboard-delete-font-size: var(--van-font-size-lg);
+@number-keyboard-title-color: var(--van-gray-7);
@number-keyboard-title-height: 34px;
-@number-keyboard-title-font-size: @font-size-lg;
-@number-keyboard-close-padding: 0 @padding-md;
-@number-keyboard-close-color: @text-link-color;
-@number-keyboard-close-font-size: @font-size-md;
-@number-keyboard-button-text-color: @white;
-@number-keyboard-button-background-color: @blue;
+@number-keyboard-title-font-size: var(--van-font-size-lg);
+@number-keyboard-close-padding: 0 var(--van-padding-md);
+@number-keyboard-close-color: var(--van-text-link-color);
+@number-keyboard-close-font-size: var(--van-font-size-md);
+@number-keyboard-button-text-color: var(--van-white);
+@number-keyboard-button-background-color: var(--van-blue);
@number-keyboard-z-index: 100;
--- a/src/overlay/index.less
+++ b/src/overlay/index.less
@ -1,11 +1,16 @@
@import './var.less';

+:root {
+  --van-overlay-z-index: @overlay-z-index;
+  --van-overlay-background-color: @overlay-background-color;
+}
+
 .van-overlay {
  position: fixed;
  top: 0;
  left: 0;
-  z-index: @overlay-z-index;
+  z-index: var(--van-overlay-z-index);
  width: 100%;
  height: 100%;
-  background-color: @overlay-background-color;
+  background-color: var(--van-overlay-background-color);
 }
--- a/src/pagination/index.less
+++ b/src/pagination/index.less
@ -1,8 +1,20 @@
@import './var.less';

+:root {
+  --van-pagination-height: @pagination-height;
+  --van-pagination-font-size: @pagination-font-size;
+  --van-pagination-item-width: @pagination-item-width;
+  --van-pagination-item-default-color: @pagination-item-default-color;
+  --van-pagination-item-disabled-color: @pagination-item-disabled-color;
+  --van-pagination-item-disabled-background-color: @pagination-item-disabled-background-color;
+  --van-pagination-background-color: @pagination-background-color;
+  --van-pagination-desc-color: @pagination-desc-color;
+  --van-pagination-disabled-opacity: @pagination-disabled-opacity;
+}
+
 .van-pagination {
  display: flex;
-  font-size: @pagination-font-size;
+  font-size: var(--van-pagination-font-size);

  &__item,
  &__page-desc {
@ -14,45 +26,46 @@
  &__item {
    flex: 1;
    box-sizing: border-box;
-    min-width: @pagination-item-width;
-    height: @pagination-height;
-    color: @pagination-item-default-color;
-    background-color: @pagination-background-color;
+    min-width: var(--van-pagination-item-width);
+    height: var(--van-pagination-height);
+    color: var(--van-pagination-item-default-color);
+    background-color: var(--van-pagination-background-color);
    cursor: pointer;
    user-select: none;

    &:active {
-      color: @white;
-      background-color: @pagination-item-default-color;
+      color: var(--van-white);
+      background-color: var(--van-pagination-item-default-color);
    }

    &::after {
-      border-width: @border-width-base 0 @border-width-base @border-width-base;
+      border-width: var(--van-border-width-base) 0 var(--van-border-width-base)
+        var(--van-border-width-base);
    }

    &:last-child::after {
-      border-right-width: @border-width-base;
+      border-right-width: var(--van-border-width-base);
    }

    &--active {
-      color: @white;
-      background-color: @pagination-item-default-color;
+      color: var(--van-white);
+      background-color: var(--van-pagination-item-default-color);
    }
  }

  &__prev,
  &__next {
-    padding: 0 @padding-base;
+    padding: 0 var(--van-padding-base);
    cursor: pointer;
  }

  &__item--disabled {
    &,
    &:active {
-      color: @pagination-item-disabled-color;
-      background-color: @pagination-item-disabled-background-color;
+      color: var(--van-pagination-item-disabled-color);
+      background-color: var(--van-pagination-item-disabled-background-color);
      cursor: not-allowed;
-      opacity: @pagination-disabled-opacity;
+      opacity: var(--van-pagination-disabled-opacity);
    }
  }

@ -62,15 +75,15 @@

  &__page-desc {
    flex: 1;
-    height: @pagination-height;
-    color: @pagination-desc-color;
+    height: var(--van-pagination-height);
+    color: var(--van-pagination-desc-color);
  }

  &--simple {
    .van-pagination__prev,
    .van-pagination__next {
      &::after {
-        border-width: @border-width-base;
+        border-width: var(--van-border-width-base);
      }
    }
  }
--- a/src/pagination/var.less
+++ b/src/pagination/var.less
@ -1,11 +1,11 @@
@import '../style/var.less';

@pagination-height: 40px;
-@pagination-font-size: @font-size-md;
+@pagination-font-size: var(--van-font-size-md);
@pagination-item-width: 36px;
-@pagination-item-default-color: @blue;
-@pagination-item-disabled-color: @gray-7;
-@pagination-item-disabled-background-color: @background-color;
-@pagination-background-color: @white;
-@pagination-desc-color: @gray-7;
-@pagination-disabled-opacity: @disabled-opacity;
+@pagination-item-default-color: var(--van-blue);
+@pagination-item-disabled-color: var(--van-gray-7);
+@pagination-item-disabled-background-color: var(--van-background-color);
+@pagination-background-color: var(--van-white);
+@pagination-desc-color: var(--van-gray-7);
+@pagination-disabled-opacity: var(--van-disabled-opacity);
--- a/src/password-input/index.less
+++ b/src/password-input/index.less
@ -1,33 +1,50 @@
@import './var.less';

+:root {
+  --van-password-input-height: @password-input-height;
+  --van-password-input-margin: @password-input-margin;
+  --van-password-input-font-size: @password-input-font-size;
+  --van-password-input-border-radius: @password-input-border-radius;
+  --van-password-input-background-color: @password-input-background-color;
+  --van-password-input-info-color: @password-input-info-color;
+  --van-password-input-info-font-size: @password-input-info-font-size;
+  --van-password-input-error-info-color: @password-input-error-info-color;
+  --van-password-input-dot-size: @password-input-dot-size;
+  --van-password-input-dot-color: @password-input-dot-color;
+  --van-password-input-cursor-color: @password-input-cursor-color;
+  --van-password-input-cursor-width: @password-input-cursor-width;
+  --van-password-input-cursor-height: @password-input-cursor-height;
+  --van-password-input-cursor-animation-duration: @password-input-cursor-animation-duration;
+}
+
 .van-password-input {
  position: relative;
-  margin: @password-input-margin;
+  margin: var(--van-password-input-margin);
  user-select: none;

  &__info,
  &__error-info {
-    margin-top: @padding-md;
-    font-size: @password-input-info-font-size;
+    margin-top: var(--van-padding-md);
+    font-size: var(--van-password-input-info-font-size);
    text-align: center;
  }

  &__info {
-    color: @password-input-info-color;
+    color: var(--van-password-input-info-color);
  }

  &__error-info {
-    color: @password-input-error-info-color;
+    color: var(--van-password-input-error-info-color);
  }

  &__security {
    display: flex;
    width: 100%;
-    height: @password-input-height;
+    height: var(--van-password-input-height);
    cursor: pointer;

    &::after {
-      border-radius: @password-input-border-radius;
+      border-radius: var(--van-password-input-border-radius);
    }

    li {
@ -37,18 +54,18 @@
      align-items: center;
      justify-content: center;
      height: 100%;
-      font-size: @password-input-font-size;
+      font-size: var(--van-password-input-font-size);
      line-height: 1.2;
-      background-color: @password-input-background-color;
+      background-color: var(--van-password-input-background-color);
    }

    i {
      position: absolute;
      top: 50%;
      left: 50%;
-      width: @password-input-dot-size;
-      height: @password-input-dot-size;
-      background-color: @password-input-dot-color;
+      width: var(--van-password-input-dot-size);
+      height: var(--van-password-input-dot-size);
+      background-color: var(--van-password-input-dot-color);
      border-radius: 100%;
      transform: translate(-50%, -50%);
      visibility: hidden;
@ -59,12 +76,12 @@
    position: absolute;
    top: 50%;
    left: 50%;
-    width: @password-input-cursor-width;
-    height: @password-input-cursor-height;
-    background-color: @password-input-cursor-color;
+    width: var(--van-password-input-cursor-width);
+    height: var(--van-password-input-cursor-height);
+    background-color: var(--van-password-input-cursor-color);
    transform: translate(-50%, -50%);
-    animation: @password-input-cursor-animation-duration van-cursor-flicker
-      infinite;
+    animation: var(--van-password-input-cursor-animation-duration)
+      van-cursor-flicker infinite;
  }
 }

--- a/src/password-input/var.less
+++ b/src/password-input/var.less
@ -1,16 +1,16 @@
@import '../style/var.less';

@password-input-height: 50px;
-@password-input-margin: 0 @padding-md;
+@password-input-margin: 0 var(--van-padding-md);
@password-input-font-size: 20px;
@password-input-border-radius: 6px;
-@password-input-background-color: @white;
-@password-input-info-color: @gray-6;
-@password-input-info-font-size: @font-size-md;
-@password-input-error-info-color: @red;
+@password-input-background-color: var(--van-white);
+@password-input-info-color: var(--van-gray-6);
+@password-input-info-font-size: var(--van-font-size-md);
+@password-input-error-info-color: var(--van-red);
@password-input-dot-size: 10px;
-@password-input-dot-color: @black;
-@password-input-cursor-color: @text-color;
+@password-input-dot-color: var(--van-black);
+@password-input-cursor-color: var(--van-text-color);
@password-input-cursor-width: 1px;
@password-input-cursor-height: 40%;
@password-input-cursor-animation-duration: 1s;
--- a/src/picker/index.less
+++ b/src/picker/index.less
@ -1,44 +1,60 @@
@import './var.less';

+:root {
+  --van-picker-background-color: @picker-background-color;
+  --van-picker-toolbar-height: @picker-toolbar-height;
+  --van-picker-title-font-size: @picker-title-font-size;
+  --van-picker-title-line-height: @picker-title-line-height;
+  --van-picker-action-padding: @picker-action-padding;
+  --van-picker-action-font-size: @picker-action-font-size;
+  --van-picker-confirm-action-color: @picker-confirm-action-color;
+  --van-picker-cancel-action-color: @picker-cancel-action-color;
+  --van-picker-option-font-size: @picker-option-font-size;
+  --van-picker-option-text-color: @picker-option-text-color;
+  --van-picker-option-disabled-opacity: @picker-option-disabled-opacity;
+  --van-picker-loading-icon-color: @picker-loading-icon-color;
+  --van-picker-loading-mask-color: @picker-loading-mask-color;
+}
+
 .van-picker {
  position: relative;
-  background-color: @picker-background-color;
+  background-color: var(--van-picker-background-color);
  user-select: none;

  &__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    height: @picker-toolbar-height;
+    height: var(--van-picker-toolbar-height);
  }

  &__cancel,
  &__confirm {
    height: 100%;
-    padding: @picker-action-padding;
-    font-size: @picker-action-font-size;
+    padding: var(--van-picker-action-padding);
+    font-size: var(--van-picker-action-font-size);
    background-color: transparent;
    border: none;
    cursor: pointer;

    &:active {
-      opacity: @active-opacity;
+      opacity: var(--van-active-opacity);
    }
  }

  &__confirm {
-    color: @picker-confirm-action-color;
+    color: var(--van-picker-confirm-action-color);
  }

  &__cancel {
-    color: @picker-cancel-action-color;
+    color: var(--van-picker-cancel-action-color);
  }

  &__title {
    max-width: 50%;
-    font-weight: @font-weight-bold;
-    font-size: @picker-title-font-size;
-    line-height: @picker-title-line-height;
+    font-weight: var(--van-font-weight-bold);
+    font-size: var(--van-picker-title-font-size);
+    line-height: var(--van-picker-title-line-height);
    text-align: center;
  }

@ -58,15 +74,15 @@
    display: flex;
    align-items: center;
    justify-content: center;
-    color: @picker-loading-icon-color;
-    background-color: @picker-loading-mask-color;
+    color: var(--van-picker-loading-icon-color);
+    background-color: var(--van-picker-loading-mask-color);
  }

  &__frame {
    position: absolute;
    top: 50%;
-    right: @padding-md;
-    left: @padding-md;
+    right: var(--van-padding-md);
+    left: var(--van-padding-md);
    z-index: 2;
    transform: translateY(-50%);
    pointer-events: none;
@ -95,7 +111,7 @@
  &-column {
    flex: 1;
    overflow: hidden;
-    font-size: @picker-option-font-size;
+    font-size: var(--van-picker-option-font-size);

    &__wrapper {
      transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
@ -105,12 +121,12 @@
      display: flex;
      align-items: center;
      justify-content: center;
-      padding: 0 @padding-base;
-      color: @picker-option-text-color;
+      padding: 0 var(--van-padding-base);
+      color: var(--van-picker-option-text-color);

      &--disabled {
        cursor: not-allowed;
-        opacity: @picker-option-disabled-opacity;
+        opacity: var(--van-picker-option-disabled-opacity);
      }
    }
  }
--- a/src/picker/var.less
+++ b/src/picker/var.less
@ -1,15 +1,15 @@
@import '../style/var.less';

-@picker-background-color: @white;
+@picker-background-color: var(--van-white);
@picker-toolbar-height: 44px;
-@picker-title-font-size: @font-size-lg;
-@picker-title-line-height: @line-height-md;
-@picker-action-padding: 0 @padding-md;
-@picker-action-font-size: @font-size-md;
-@picker-confirm-action-color: @text-link-color;
-@picker-cancel-action-color: @gray-6;
-@picker-option-font-size: @font-size-lg;
-@picker-option-text-color: @black;
+@picker-title-font-size: var(--van-font-size-lg);
+@picker-title-line-height: var(--van-line-height-md);
+@picker-action-padding: 0 var(--van-padding-md);
+@picker-action-font-size: var(--van-font-size-md);
+@picker-confirm-action-color: var(--van-text-link-color);
+@picker-cancel-action-color: var(--van-gray-6);
+@picker-option-font-size: var(--van-font-size-lg);
+@picker-option-text-color: var(--van-black);
@picker-option-disabled-opacity: 0.3;
-@picker-loading-icon-color: @blue;
+@picker-loading-icon-color: var(--van-blue);
@picker-loading-mask-color: rgba(255, 255, 255, 0.9);
--- a/src/popover/index.less
+++ b/src/popover/index.less
@ -1,5 +1,21 @@
@import './var.less';

+:root {
+  --van-popover-arrow-size: @popover-arrow-size;
+  --van-popover-border-radius: @popover-border-radius;
+  --van-popover-action-width: @popover-action-width;
+  --van-popover-action-height: @popover-action-height;
+  --van-popover-action-font-size: @popover-action-font-size;
+  --van-popover-action-line-height: @popover-action-line-height;
+  --van-popover-action-icon-size: @popover-action-icon-size;
+  --van-popover-light-text-color: @popover-light-text-color;
+  --van-popover-light-background-color: @popover-light-background-color;
+  --van-popover-light-action-disabled-text-color: @popover-light-action-disabled-text-color;
+  --van-popover-dark-text-color: @popover-dark-text-color;
+  --van-popover-dark-background-color: @popover-dark-background-color;
+  --van-popover-dark-action-disabled-text-color: @popover-dark-action-disabled-text-color;
+}
+
 .van-popover {
  position: absolute;
  overflow: visible;
@ -16,12 +32,12 @@
    height: 0;
    border-color: transparent;
    border-style: solid;
-    border-width: @popover-arrow-size;
+    border-width: var(--van-popover-arrow-size);
  }

  &__content {
    overflow: hidden;
-    border-radius: @popover-border-radius;
+    border-radius: var(--van-popover-border-radius);
  }

  &__action {
@ -29,11 +45,11 @@
    display: flex;
    align-items: center;
    box-sizing: border-box;
-    width: @popover-action-width;
-    height: @popover-action-height;
-    padding: 0 @padding-md;
-    font-size: @popover-action-font-size;
-    line-height: @line-height-md;
+    width: var(--van-popover-action-width);
+    height: var(--van-popover-action-height);
+    padding: 0 var(--van-padding-md);
+    font-size: var(--van-popover-action-font-size);
+    line-height: var(--van-line-height-md);
    cursor: pointer;

    &:last-child {
@ -51,8 +67,8 @@
    }

    &-icon {
-      margin-right: @padding-xs;
-      font-size: @popover-action-icon-size;
+      margin-right: var(--van-padding-xs);
+      font-size: var(--van-popover-action-icon-size);
    }

    &--with-icon {
@ -83,7 +99,7 @@
    transform-origin: 0 100%;

    .van-popover__arrow {
-      left: @padding-md;
+      left: var(--van-padding-md);
    }
  }

@ -91,7 +107,7 @@
    transform-origin: 100% 100%;

    .van-popover__arrow {
-      right: @padding-md;
+      right: var(--van-padding-md);
    }
  }

@ -116,7 +132,7 @@
    transform-origin: 100% 0;

    .van-popover__arrow {
-      top: @padding-md;
+      top: var(--van-padding-md);
    }
  }

@ -124,7 +140,7 @@
    transform-origin: 100% 100%;

    .van-popover__arrow {
-      bottom: @padding-md;
+      bottom: var(--van-padding-md);
    }
  }

@ -149,7 +165,7 @@
    transform-origin: 0 0;

    .van-popover__arrow {
-      top: @padding-md;
+      top: var(--van-padding-md);
    }
  }

@ -157,7 +173,7 @@
    transform-origin: 0 100%;

    .van-popover__arrow {
-      bottom: @padding-md;
+      bottom: var(--van-padding-md);
    }
  }

@ -182,7 +198,7 @@
    transform-origin: 0 0;

    .van-popover__arrow {
-      left: @padding-md;
+      left: var(--van-padding-md);
    }
  }

@ -190,29 +206,29 @@
    transform-origin: 100% 0;

    .van-popover__arrow {
-      right: @padding-md;
+      right: var(--van-padding-md);
    }
  }

  &--light {
-    color: @popover-light-text-color;
+    color: var(--van-popover-light-text-color);

    .van-popover__content {
-      background-color: @popover-light-background-color;
+      background-color: var(--van-popover-light-background-color);
      box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
    }

    .van-popover__arrow {
-      color: @popover-light-background-color;
+      color: var(--van-popover-light-background-color);
    }

    .van-popover__action {
      &:active {
-        background-color: @active-color;
+        background-color: var(--van-active-color);
      }

      &--disabled {
-        color: @popover-light-action-disabled-text-color;
+        color: var(--van-popover-light-action-disabled-text-color);
        cursor: not-allowed;

        &:active {
@ -223,14 +239,14 @@
  }

  &--dark {
-    color: @popover-dark-text-color;
+    color: var(--van-popover-dark-text-color);

    .van-popover__content {
-      background-color: @popover-dark-background-color;
+      background-color: var(--van-popover-dark-background-color);
    }

    .van-popover__arrow {
-      color: @popover-dark-background-color;
+      color: var(--van-popover-dark-background-color);
    }

    .van-popover__action {
@ -239,7 +255,7 @@
      }

      &--disabled {
-        color: @popover-dark-action-disabled-text-color;
+        color: var(--van-popover-dark-action-disabled-text-color);

        &:active {
          background-color: transparent;
@ -249,7 +265,7 @@

    .van-popover__action-text {
      &::after {
-        border-color: @gray-7;
+        border-color: var(--van-gray-7);
      }
    }
  }
@ -261,10 +277,10 @@
  }

  &-zoom-enter-active {
-    transition-timing-function: @animation-timing-function-enter;
+    transition-timing-function: var(--van-animation-timing-function-enter);
  }

  &-zoom-leave-active {
-    transition-timing-function: @animation-timing-function-leave;
+    transition-timing-function: var(--van-animation-timing-function-leave);
  }
 }
--- a/src/popover/var.less
+++ b/src/popover/var.less
@ -1,15 +1,15 @@
@import '../style/var.less';

@popover-arrow-size: 6px;
-@popover-border-radius: @border-radius-lg;
+@popover-border-radius: var(--van-border-radius-lg);
@popover-action-width: 128px;
@popover-action-height: 44px;
-@popover-action-font-size: @font-size-md;
-@popover-action-line-height: @line-height-md;
+@popover-action-font-size: var(--van-font-size-md);
+@popover-action-line-height: var(--van-line-height-md);
@popover-action-icon-size: 20px;
-@popover-light-text-color: @text-color;
-@popover-light-background-color: @white;
-@popover-light-action-disabled-text-color: @gray-5;
-@popover-dark-text-color: @white;
+@popover-light-text-color: var(--van-text-color);
+@popover-light-background-color: var(--van-white);
+@popover-light-action-disabled-text-color: var(--van-gray-5);
+@popover-dark-text-color: var(--van-white);
@popover-dark-background-color: #4a4a4a;
-@popover-dark-action-disabled-text-color: @gray-6;
+@popover-dark-action-disabled-text-color: var(--van-gray-6);
--- a/src/popup/index.less
+++ b/src/popup/index.less
@ -1,6 +1,17 @@
@import './var.less';
@import '../style/mixins/safe-area.less';

+:root {
+  --van-popup-background-color: @popup-background-color;
+  --van-popup-transition: @popup-transition;
+  --van-popup-round-border-radius: @popup-round-border-radius;
+  --van-popup-close-icon-size: @popup-close-icon-size;
+  --van-popup-close-icon-color: @popup-close-icon-color;
+  --van-popup-close-icon-active-color: @popup-close-icon-active-color;
+  --van-popup-close-icon-margin: @popup-close-icon-margin;
+  --van-popup-close-icon-z-index: @popup-close-icon-z-index;
+}
+
 .van {
  &-overflow-hidden {
    overflow: hidden !important;
@ -10,8 +21,8 @@
    position: fixed;
    max-height: 100%;
    overflow-y: auto;
-    background-color: @popup-background-color;
-    transition: @popup-transition;
+    background-color: var(--van-popup-background-color);
+    transition: var(--van-popup-transition);
    -webkit-overflow-scrolling: touch;

    &--center {
@ -20,7 +31,7 @@
      transform: translate3d(-50%, -50%, 0);

      &.van-popup--round {
-        border-radius: @popup-round-border-radius;
+        border-radius: var(--van-popup-round-border-radius);
      }
    }

@ -30,7 +41,8 @@
      width: 100%;

      &.van-popup--round {
-        border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius;
+        border-radius: 0 0 var(--van-popup-round-border-radius)
+          var(--van-popup-round-border-radius);
      }
    }

@ -40,7 +52,8 @@
      transform: translate3d(0, -50%, 0);

      &.van-popup--round {
-        border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius;
+        border-radius: var(--van-popup-round-border-radius) 0 0
+          var(--van-popup-round-border-radius);
      }
    }

@ -50,7 +63,8 @@
      width: 100%;

      &.van-popup--round {
-        border-radius: @popup-round-border-radius @popup-round-border-radius 0 0;
+        border-radius: var(--van-popup-round-border-radius)
+          var(--van-popup-round-border-radius) 0 0;
      }
    }

@ -60,7 +74,8 @@
      transform: translate3d(0, -50%, 0);

      &.van-popup--round {
-        border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0;
+        border-radius: 0 var(--van-popup-round-border-radius)
+          var(--van-popup-round-border-radius) 0;
      }
    }

@ -72,14 +87,14 @@
    &-slide-left-enter-active,
    &-slide-right-enter-active,
    &-slide-bottom-enter-active {
-      transition-timing-function: @animation-timing-function-enter;
+      transition-timing-function: var(--van-animation-timing-function-enter);
    }

    &-slide-top-leave-active,
    &-slide-left-leave-active,
    &-slide-right-leave-active,
    &-slide-bottom-leave-active {
-      transition-timing-function: @animation-timing-function-leave;
+      transition-timing-function: var(--van-animation-timing-function-leave);
    }

    &-slide-top-enter-from,
@ -104,33 +119,33 @@

    &__close-icon {
      position: absolute;
-      z-index: @popup-close-icon-z-index;
-      color: @popup-close-icon-color;
-      font-size: @popup-close-icon-size;
+      z-index: var(--van-popup-close-icon-z-index);
+      color: var(--van-popup-close-icon-color);
+      font-size: var(--van-popup-close-icon-size);
      cursor: pointer;

      &:active {
-        color: @popup-close-icon-active-color;
+        color: var(--van-popup-close-icon-active-color);
      }

      &--top-left {
-        top: @popup-close-icon-margin;
-        left: @popup-close-icon-margin;
+        top: var(--van-popup-close-icon-margin);
+        left: var(--van-popup-close-icon-margin);
      }

      &--top-right {
-        top: @popup-close-icon-margin;
-        right: @popup-close-icon-margin;
+        top: var(--van-popup-close-icon-margin);
+        right: var(--van-popup-close-icon-margin);
      }

      &--bottom-left {
-        bottom: @popup-close-icon-margin;
-        left: @popup-close-icon-margin;
+        bottom: var(--van-popup-close-icon-margin);
+        left: var(--van-popup-close-icon-margin);
      }

      &--bottom-right {
-        right: @popup-close-icon-margin;
-        bottom: @popup-close-icon-margin;
+        right: var(--van-popup-close-icon-margin);
+        bottom: var(--van-popup-close-icon-margin);
      }
    }
  }
--- a/src/popup/var.less
+++ b/src/popup/var.less
@ -1,10 +1,10 @@
@import '../style/var.less';

-@popup-background-color: @white;
-@popup-transition: transform @animation-duration-base;
+@popup-background-color: var(--van-white);
+@popup-transition: transform var(--van-animation-duration-base);
@popup-round-border-radius: 16px;
@popup-close-icon-size: 22px;
-@popup-close-icon-color: @gray-5;
-@popup-close-icon-active-color: @gray-6;
+@popup-close-icon-color: var(--van-gray-5);
+@popup-close-icon-active-color: var(--van-gray-6);
@popup-close-icon-margin: 16px;
@popup-close-icon-z-index: 1;
--- a/src/progress/index.less
+++ b/src/progress/index.less
@ -1,16 +1,27 @@
@import './var.less';

+:root {
+  --van-progress-height: @progress-height;
+  --van-progress-color: @progress-color;
+  --van-progress-background-color: @progress-background-color;
+  --van-progress-pivot-padding: @progress-pivot-padding;
+  --van-progress-pivot-text-color: @progress-pivot-text-color;
+  --van-progress-pivot-font-size: @progress-pivot-font-size;
+  --van-progress-pivot-line-height: @progress-pivot-line-height;
+  --van-progress-pivot-background-color: @progress-pivot-background-color;
+}
+
 .van-progress {
  position: relative;
-  height: @progress-height;
-  background: @progress-background-color;
-  border-radius: @progress-height;
+  height: var(--van-progress-height);
+  background: var(--van-progress-background-color);
+  border-radius: var(--van-progress-height);

  &__portion {
    position: absolute;
    left: 0;
    height: 100%;
-    background: @progress-color;
+    background: var(--van-progress-color);
    border-radius: inherit;
  }

@ -19,13 +30,13 @@
    top: 50%;
    box-sizing: border-box;
    min-width: 3.6em;
-    padding: @progress-pivot-padding;
-    color: @progress-pivot-text-color;
-    font-size: @progress-pivot-font-size;
-    line-height: @progress-pivot-line-height;
+    padding: var(--van-progress-pivot-padding);
+    color: var(--van-progress-pivot-text-color);
+    font-size: var(--van-progress-pivot-font-size);
+    line-height: var(--van-progress-pivot-line-height);
    text-align: center;
    word-break: keep-all;
-    background-color: @progress-pivot-background-color;
+    background-color: var(--van-progress-pivot-background-color);
    border-radius: 1em;
    transform: translate(0, -50%);
  }
--- a/src/progress/var.less
+++ b/src/progress/var.less
@ -1,10 +1,10 @@
@import '../style/var.less';

@progress-height: 4px;
-@progress-color: @blue;
-@progress-background-color: @gray-3;
+@progress-color: var(--van-blue);
+@progress-background-color: var(--van-gray-3);
@progress-pivot-padding: 0 5px;
-@progress-pivot-text-color: @white;
-@progress-pivot-font-size: @font-size-xs;
+@progress-pivot-text-color: var(--van-white);
+@progress-pivot-font-size: var(--van-font-size-xs);
@progress-pivot-line-height: 1.6;
-@progress-pivot-background-color: @blue;
+@progress-pivot-background-color: var(--van-blue);
--- a/src/pull-refresh/index.less
+++ b/src/pull-refresh/index.less
@ -1,5 +1,12 @@
@import './var.less';

+:root {
+  --van-pull-refresh-head-height: @pull-refresh-head-height;
+  --van-pull-refresh-head-font-size: @pull-refresh-head-font-size;
+  --van-pull-refresh-head-text-color: @pull-refresh-head-text-color;
+  --van-pull-refresh-loading-icon-size: @pull-refresh-loading-icon-size;
+}
+
 .van-pull-refresh {
  overflow: hidden;
  user-select: none;
@ -14,19 +21,19 @@
    position: absolute;
    left: 0;
    width: 100%;
-    height: @pull-refresh-head-height;
+    height: var(--van-pull-refresh-head-height);
    overflow: hidden;
-    color: @pull-refresh-head-text-color;
-    font-size: @pull-refresh-head-font-size;
-    line-height: @pull-refresh-head-height;
+    color: var(--van-pull-refresh-head-text-color);
+    font-size: var(--van-pull-refresh-head-font-size);
+    line-height: var(--van-pull-refresh-head-height);
    text-align: center;
    transform: translateY(-100%);
  }

  &__loading {
    .van-loading__spinner {
-      width: @pull-refresh-loading-icon-size;
-      height: @pull-refresh-loading-icon-size;
+      width: var(--van-pull-refresh-loading-icon-size);
+      height: var(--van-pull-refresh-loading-icon-size);
    }
  }
 }
--- a/src/pull-refresh/var.less
+++ b/src/pull-refresh/var.less
@ -1,6 +1,6 @@
@import '../style/var.less';

@pull-refresh-head-height: 50px;
-@pull-refresh-head-font-size: @font-size-md;
-@pull-refresh-head-text-color: @gray-6;
+@pull-refresh-head-font-size: var(--van-font-size-md);
+@pull-refresh-head-text-color: var(--van-gray-6);
@pull-refresh-loading-icon-size: 16px;
--- a/src/radio/index.less
+++ b/src/radio/index.less
@ -1,5 +1,17 @@
@import './var.less';

+:root {
+  --van-radio-size: @radio-size;
+  --van-radio-border-color: @radio-border-color;
+  --van-radio-transition-duration: @radio-transition-duration;
+  --van-radio-label-margin: @radio-label-margin;
+  --van-radio-label-color: @radio-label-color;
+  --van-radio-checked-icon-color: @radio-checked-icon-color;
+  --van-radio-disabled-icon-color: @radio-disabled-icon-color;
+  --van-radio-disabled-label-color: @radio-disabled-label-color;
+  --van-radio-disabled-background-color: @radio-disabled-background-color;
+}
+
 .van-radio {
  display: flex;
  align-items: center;
@ -16,13 +28,13 @@
  }

  &--horizontal {
-    margin-right: @padding-sm;
+    margin-right: var(--van-padding-sm);
  }

  &__icon {
    flex: none;
    height: 1em;
-    font-size: @radio-size;
+    font-size: var(--van-radio-size);
    line-height: 1em;
    cursor: pointer;

@ -35,8 +47,8 @@
      font-size: 0.8em;
      line-height: 1.25;
      text-align: center;
-      border: 1px solid @radio-border-color;
-      transition-duration: @radio-transition-duration;
+      border: 1px solid var(--van-radio-border-color);
+      transition-duration: var(--van-radio-transition-duration);
      transition-property: color, border-color, background-color;
    }

@ -48,9 +60,9 @@

    &--checked {
      .van-icon {
-        color: @white;
-        background-color: @radio-checked-icon-color;
-        border-color: @radio-checked-icon-color;
+        color: var(--van-white);
+        background-color: var(--van-radio-checked-icon-color);
+        border-color: var(--van-radio-checked-icon-color);
      }
    }

@ -58,29 +70,29 @@
      cursor: not-allowed;

      .van-icon {
-        background-color: @radio-disabled-background-color;
-        border-color: @radio-disabled-icon-color;
+        background-color: var(--van-radio-disabled-background-color);
+        border-color: var(--van-radio-disabled-icon-color);
      }
    }

    &--disabled&--checked {
      .van-icon {
-        color: @radio-disabled-icon-color;
+        color: var(--van-radio-disabled-icon-color);
      }
    }
  }

  &__label {
-    margin-left: @radio-label-margin;
-    color: @radio-label-color;
-    line-height: @radio-size;
+    margin-left: var(--van-radio-label-margin);
+    color: var(--van-radio-label-color);
+    line-height: var(--van-radio-size);

    &--left {
-      margin: 0 @radio-label-margin 0 0;
+      margin: 0 var(--van-radio-label-margin) 0 0;
    }

    &--disabled {
-      color: @radio-disabled-label-color;
+      color: var(--van-radio-disabled-label-color);
    }
  }
 }
--- a/src/radio/var.less
+++ b/src/radio/var.less
@ -1,11 +1,11 @@
@import '../style/var.less';

@radio-size: 20px;
-@radio-border-color: @gray-5;
-@radio-transition-duration: @animation-duration-fast;
-@radio-label-margin: @padding-xs;
-@radio-label-color: @text-color;
-@radio-checked-icon-color: @blue;
-@radio-disabled-icon-color: @gray-5;
-@radio-disabled-label-color: @gray-5;
-@radio-disabled-background-color: @border-color;
+@radio-border-color: var(--van-gray-5);
+@radio-transition-duration: var(--van-animation-duration-fast);
+@radio-label-margin: var(--van-padding-xs);
+@radio-label-color: var(--van-text-color);
+@radio-checked-icon-color: var(--van-blue);
+@radio-disabled-icon-color: var(--van-gray-5);
+@radio-disabled-label-color: var(--van-gray-5);
+@radio-disabled-background-color: var(--van-border-color);
--- a/src/rate/index.less
+++ b/src/rate/index.less
@ -1,5 +1,13 @@
@import './var.less';

+:root {
+  --van-rate-icon-size: @rate-icon-size;
+  --van-rate-icon-gutter: @rate-icon-gutter;
+  --van-rate-icon-void-color: @rate-icon-void-color;
+  --van-rate-icon-full-color: @rate-icon-full-color;
+  --van-rate-icon-disabled-color: @rate-icon-disabled-color;
+}
+
 .van-rate {
  display: inline-flex;
  cursor: pointer;
@ -9,15 +17,15 @@
    position: relative;

    &:not(:last-child) {
-      padding-right: @rate-icon-gutter;
+      padding-right: var(--van-rate-icon-gutter);
    }
  }

  &__icon {
    display: block;
    width: 1em;
-    color: @rate-icon-void-color;
-    font-size: @rate-icon-size;
+    color: var(--van-rate-icon-void-color);
+    font-size: var(--van-rate-icon-size);

    &--half {
      position: absolute;
@ -27,11 +35,11 @@
    }

    &--full {
-      color: @rate-icon-full-color;
+      color: var(--van-rate-icon-full-color);
    }

    &--disabled {
-      color: @rate-icon-disabled-color;
+      color: var(--van-rate-icon-disabled-color);
    }
  }

--- a/src/rate/var.less
+++ b/src/rate/var.less
@ -1,7 +1,7 @@
@import '../style/var.less';

@rate-icon-size: 20px;
-@rate-icon-gutter: @padding-base;
-@rate-icon-void-color: @gray-5;
-@rate-icon-full-color: @red;
-@rate-icon-disabled-color: @gray-5;
+@rate-icon-gutter: var(--van-padding-base);
+@rate-icon-void-color: var(--van-gray-5);
+@rate-icon-full-color: var(--van-red);
+@rate-icon-disabled-color: var(--van-gray-5);
--- a/src/search/index.less
+++ b/src/search/index.less
@ -1,38 +1,52 @@
@import './var.less';

+:root {
+  --van-search-padding: @search-padding;
+  --van-search-background-color: @search-background-color;
+  --van-search-content-background-color: @search-content-background-color;
+  --van-search-input-height: @search-input-height;
+  --van-search-label-padding: @search-label-padding;
+  --van-search-label-color: @search-label-color;
+  --van-search-label-font-size: @search-label-font-size;
+  --van-search-left-icon-color: @search-left-icon-color;
+  --van-search-action-padding: @search-action-padding;
+  --van-search-action-text-color: @search-action-text-color;
+  --van-search-action-font-size: @search-action-font-size;
+}
+
 .van-search {
  display: flex;
  align-items: center;
  box-sizing: border-box;
-  padding: @search-padding;
-  background-color: @search-background-color;
+  padding: var(--van-search-padding);
+  background-color: var(--van-search-background-color);

  &__content {
    display: flex;
    flex: 1;
-    padding-left: @padding-sm;
-    background-color: @search-content-background-color;
-    border-radius: @border-radius-sm;
+    padding-left: var(--van-padding-sm);
+    background-color: var(--van-search-content-background-color);
+    border-radius: var(--van-border-radius-sm);

    &--round {
-      border-radius: @border-radius-max;
+      border-radius: var(--van-border-radius-max);
    }
  }

  &__label {
-    padding: @search-label-padding;
-    color: @search-label-color;
-    font-size: @search-label-font-size;
-    line-height: @search-input-height;
+    padding: var(--van-search-label-padding);
+    color: var(--van-search-label-color);
+    font-size: var(--van-search-label-font-size);
+    line-height: var(--van-search-input-height);
  }

  .van-cell {
    flex: 1;
-    padding: 5px @padding-xs 5px 0;
+    padding: 5px var(--van-padding-xs) 5px 0;
    background-color: transparent;

    &__left-icon {
-      color: @search-left-icon-color;
+      color: var(--van-search-left-icon-color);
    }
  }

@ -50,15 +64,15 @@
  }

  &__action {
-    padding: @search-action-padding;
-    color: @search-action-text-color;
-    font-size: @search-action-font-size;
-    line-height: @search-input-height;
+    padding: var(--van-search-action-padding);
+    color: var(--van-search-action-text-color);
+    font-size: var(--van-search-action-font-size);
+    line-height: var(--van-search-input-height);
    cursor: pointer;
    user-select: none;

    &:active {
-      background-color: @active-color;
+      background-color: var(--van-active-color);
    }
  }
 }
--- a/src/search/var.less
+++ b/src/search/var.less
@ -1,13 +1,13 @@
@import '../style/var.less';

-@search-padding: 10px @padding-sm;
-@search-background-color: @white;
-@search-content-background-color: @gray-1;
+@search-padding: 10px var(--van-padding-sm);
+@search-background-color: var(--van-white);
+@search-content-background-color: var(--van-gray-1);
@search-input-height: 34px;
@search-label-padding: 0 5px;
-@search-label-color: @text-color;
-@search-label-font-size: @font-size-md;
-@search-left-icon-color: @gray-6;
-@search-action-padding: 0 @padding-xs;
-@search-action-text-color: @text-color;
-@search-action-font-size: @font-size-md;
+@search-label-color: var(--van-text-color);
+@search-label-font-size: var(--van-font-size-md);
+@search-left-icon-color: var(--van-gray-6);
+@search-action-padding: 0 var(--van-padding-xs);
+@search-action-text-color: var(--van-text-color);
+@search-action-font-size: var(--van-font-size-md);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
chenjiahan	0789d86de5	fix: missing import var	2021-06-12 15:52:22 +08:00
chenjiahan	710aebaee4	feat(style): component using basic css variables	2021-06-12 15:52:22 +08:00
chenjiahan	aef2579a95	feat(style): add basic css variables	2021-06-12 15:52:22 +08:00
chenjiahan	fe1cba97b7	feat(style): add component css variables	2021-06-12 15:52:22 +08:00