一些常見的例子：
為風格統一而使用顏色變量
一致的組件屬性（布局，定位等）
避免代碼冗余
*更方便的從CSS向JS傳遞數據（例如媒體斷點）

以下幾點是未來CSS屬性的簡短說明：
動態性，可以在運行時更改
可以方便的從JS中讀/寫
可繼承，可組合，同時具有作用域

定義
用這樣的方式來聲明一個變量：--variable-name: variable-value;（變量名是大小寫敏感的）。變量的值可以是顏色、字符串、多個值的組合等:

:root{
--base_color:#398bd0;
--bg_color:#4a4a4a;
}

為什么選擇兩根連詞線（--）表示變量？
$foo被 Sass 用掉了，
@foo被 Less 用掉了。
為了不產生沖突，官方的 CSS 變量就改用兩根連詞線了

.res_nav ul li:hover a{color:var(--base_color);}
.res_contact_btn a:hover{background:var(--base_color);}

:root{ --global-var: 'global'; }

<div class="block"> 
My block is 
<div class="block__highlight">awesome</div> 
</div>

/*css文件*/
.block { --block-font-size: 1rem; font-size: var(--block-font-size); } 
.block__highlight { --block-highlight-font-size: 1.5rem; font-size: var(--block-highlight-font-size); }

@media screen and (min-width: 1025px) { 
:root { 
--screen-category: 'desktop';
} 
}