CSS 自定義變數

使用背景：

一些常見的例子：

為風格統一而使用顏色變數
一致的組件屬性（佈局，定位等）
避免代碼冗餘

*更方便的從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 作用域來定義全局變數：

: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';
     } 
}    

下麵一個例子來展示偽類下的作用域（例如，:hover）：