diff --git a/pages.json b/pages.json
index 516c84af0edf37b9c79c5c7711653cdc2ad6744e..c9cd5c1562ec0d0be4ee3ab6f5e3efb892e8aefd 100644
--- a/pages.json
+++ b/pages.json
@@ -993,11 +993,17 @@
         "navigationBarTitleText": "Scale"
       }
     },
-    {
-      "path": "pages/CSS/transform/rotate",
-      "style": {
-        "navigationBarTitleText": "Rotate"
-      }
+    {
+      "path": "pages/CSS/transform/rotate",
+      "style": {
+        "navigationBarTitleText": "Rotate"
+      }
+    },
+    {
+      "path": "pages/CSS/variable/variable",
+      "style": {
+        "navigationBarTitleText": "css 变量"
+      }
     },
     {
       "path": "pages/tabBar/template",
diff --git a/pages/CSS/variable/variable.test.js b/pages/CSS/variable/variable.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..5891aaa337067877caba1c636c4f4694f01823a3
--- /dev/null
+++ b/pages/CSS/variable/variable.test.js
@@ -0,0 +1,14 @@
+describe('css-variable', () => {
+  let page;
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/CSS/variable/variable');
+    await page.waitFor('view');
+  });
+
+  it('screenshot', async () => {
+    const image = await program.screenshot({
+      fullPage: true
+    })
+    expect(image).toMatchImageSnapshot()
+  });
+});
diff --git a/pages/CSS/variable/variable.uvue b/pages/CSS/variable/variable.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..5077d052ad4a3d95fac157b6c5ab81dd322e98c3
--- /dev/null
+++ b/pages/CSS/variable/variable.uvue
@@ -0,0 +1,30 @@
+<template>
+  <view class="page">
+    <view class="status-bar-height">
+      <text>status bar height</text>
+    </view>
+    <view class="window-top">
+      <text>window top</text>
+    </view>
+    <view class="window-bottom">
+      <text>window bottom</text>
+    </view>
+  </view>
+</template>
+
+<style>
+  .status-bar-height {
+    height: var(--status-bar-height);
+    background-color: red;
+  }
+
+  .window-top {
+    height: var(--window-top);
+    background-color: green;
+  }
+
+  .window-bottom {
+    height: var(--window-bottom);
+    background-color: blue;
+  }
+</style>
diff --git a/pages/tabBar/CSS.uvue b/pages/tabBar/CSS.uvue
index f480b4afb3e9236428e1364634bdfe177fa9ce97..93d891cfd70a5a3f112cda5882c406e76fb844b3 100644
--- a/pages/tabBar/CSS.uvue
+++ b/pages/tabBar/CSS.uvue
@@ -1,7 +1,7 @@
 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
-    <!-- #endif -->
+  <!-- #endif -->
     <view class="uni-container">
       <view class="uni-header-logo">
         <image class="uni-header-image" src="/static/cssIndex.png"></image>
@@ -24,7 +24,7 @@
         </template>
       </uni-collapse>
     </view>
-    <!-- #ifdef APP -->
+  <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
@@ -83,22 +83,22 @@
               {
                 name: 'border-radius',
                 url: '/pages/CSS/border/border-radius',
-              },
-              {
-                name: 'border-top',
-                url: '/pages/CSS/border/border-top',
-              },
-              {
-                name: 'border-bottom',
-                url: '/pages/CSS/border/border-bottom',
-              },
-              {
-                name: 'border-left',
-                url: '/pages/CSS/border/border-left',
-              },
-              {
-                name: 'border-right',
-                url: '/pages/CSS/border/border-right',
+              },
+              {
+                name: 'border-top',
+                url: '/pages/CSS/border/border-top',
+              },
+              {
+                name: 'border-bottom',
+                url: '/pages/CSS/border/border-bottom',
+              },
+              {
+                name: 'border-left',
+                url: '/pages/CSS/border/border-left',
+              },
+              {
+                name: 'border-right',
+                url: '/pages/CSS/border/border-right',
               },
               {
                 name: 'border属性复合示例',
@@ -203,10 +203,10 @@
               {
                 name: 'width',
                 url: '/pages/CSS/layout/width',
-              },
-              {
-                name: 'z-index',
-                url: '/pages/CSS/layout/z-index',
+              },
+              {
+                name: 'z-index',
+                url: '/pages/CSS/layout/z-index',
               },
               {
                 name: 'visibility',
@@ -265,16 +265,16 @@
                 url: '/pages/CSS/padding/padding',
               },
             ] as Page[],
-          },
-          {
-            id: 'overflow',
-            name: 'overflow',
-            pages: [
-              {
-                name: 'overflow',
-                url: '/pages/CSS/overflow/overflow',
-              },
-            ] as Page[],
+          },
+          {
+            id: 'overflow',
+            name: 'overflow',
+            pages: [
+              {
+                name: 'overflow',
+                url: '/pages/CSS/overflow/overflow',
+              },
+            ] as Page[],
           },
           {
             id: 'text',
@@ -349,6 +349,16 @@
                 url: '/pages/CSS/transition/transition',
               },
             ] as Page[],
+          },
+          {
+            id: 'variable',
+            name: 'variable',
+            pages: [
+              {
+                name: 'variable',
+                url: '/pages/CSS/variable/variable',
+              },
+            ] as Page[],
           }
         ] as ListItem[],
         arrowUpIcon: '/static/icons/arrow-up.png',