diff --git a/src/style/base.less b/src/style/base.less
index 086daec7f..95fcd0631 100644
--- a/src/style/base.less
+++ b/src/style/base.less
@@ -2,9 +2,10 @@
  * Entry of basic styles
  */
 
-@import './var';
-@import './normalize';
-@import './ellipsis';
-@import './clearfix';
-@import './hairline';
-@import './animation';
+@import './var.less';
+@import './css-variables.less';
+@import './normalize.less';
+@import './ellipsis.less';
+@import './clearfix.less';
+@import './hairline.less';
+@import './animation.less';
diff --git a/src/style/css-variables.less b/src/style/css-variables.less
new file mode 100644
index 000000000..4b4c99575
--- /dev/null
+++ b/src/style/css-variables.less
@@ -0,0 +1,67 @@
+:host {
+  // Color Palette
+  --van-black: @black;
+  --van-white: @white;
+  --van-gray-1: @gray-1;
+  --van-gray-2: @gray-2;
+  --van-gray-3: @gray-3;
+  --van-gray-4: @gray-4;
+  --van-gray-5: @gray-5;
+  --van-gray-6: @gray-6;
+  --van-gray-7: @gray-7;
+  --van-gray-8: @gray-8;
+  --van-red: @red;
+  --van-blue: @blue;
+  --van-orange: @orange;
+  --van-orange-dark: @orange-dark;
+  --van-orange-light: @orange-light;
+  --van-green: @green;
+
+  // Gradient Colors
+  --van-gradient-red: @gradient-red;
+  --van-gradient-orange: @gradient-orange;
+
+  // Component Colors
+  --van-text-color: @text-color;
+  --van-active-color: @active-color;
+  --van-active-opacity: @active-opacity;
+  --van-disabled-opacity: @disabled-opacity;
+  --van-background-color: @background-color;
+  --van-background-color-light: @background-color-light;
+  --van-text-link-color: @text-link-color;
+
+  // Padding
+  --van-padding-base: @padding-base;
+  --van-padding-xs: @padding-xs;
+  --van-padding-sm: @padding-sm;
+  --van-padding-md: @padding-md;
+  --van-padding-lg: @padding-lg;
+  --van-padding-xl: @padding-xl;
+
+  // Font
+  --van-font-size-xs: @font-size-xs;
+  --van-font-size-sm: @font-size-sm;
+  --van-font-size-md: @font-size-md;
+  --van-font-size-lg: @font-size-lg;
+  --van-font-weight-bold: @font-weight-bold;
+  --van-line-height-xs: @line-height-xs;
+  --van-line-height-sm: @line-height-sm;
+  --van-line-height-md: @line-height-md;
+  --van-line-height-lg: @line-height-lg;
+  --van-base-font-family: @base-font-family;
+  --van-price-integer-font-family: @price-integer-font-family;
+
+  // Animation
+  --van-animation-duration-base: @animation-duration-base;
+  --van-animation-duration-fast: @animation-duration-fast;
+  --van-animation-timing-function-enter: @animation-timing-function-enter;
+  --van-animation-timing-function-leave: @animation-timing-function-leave;
+
+  // Border
+  --van-border-color: @border-color;
+  --van-border-width-base: @border-width-base;
+  --van-border-radius-sm: @border-radius-sm;
+  --van-border-radius-md: @border-radius-md;
+  --van-border-radius-lg: @border-radius-lg;
+  --van-border-radius-max: @border-radius-max;
+}