chore: demo using css vars (#9265)

src/style/demo/index.vue

@@ -62,24 +62,22 @@ const animate = (newName: string) => {
 </template>
 
 <style lang="less">
-@import '../../style/var';
-
 .demo-style {
   .van-ellipsis,
   .van-multi-ellipsis--l2 {
     max-width: 300px;
-    margin-left: @padding-md;
+    margin-left: var(--van-padding-md);
     font-size: 14px;
     line-height: 18px;
   }
 
   .van-ellipsis {
-    margin-bottom: @padding-md;
+    margin-bottom: var(--van-padding-md);
   }
 
   .van-hairline--top {
     height: 30px;
-    background-color: @white;
+    background-color: var(--van-white);
 
     &::after {
       top: 5px;
@@ -93,7 +91,7 @@ const animate = (newName: string) => {
     width: 100px;
     height: 100px;
     margin: -50px 0 0 -50px;
-    background-color: @blue;
+    background-color: var(--van-blue);
     border-radius: 8px;
   }
 }