原生CSS 變量

css中我們可以統一設置 變量 方便頁面維護

聲明

變量聲明的時候，變量名之前加上兩根連詞線（–）即可。例如：

聲明的變量是有作用域的，比如是在html中聲明的變量，那么該變量在html中的任何地方都可以使用這個變量，如果該變量在p標簽中聲明的，那么只能在p標簽下使用這個變量。

body {--foo: #7F583F;--bar: #F7EFD2;
}/* foo 與 bar是變量名稱 他們的值分別是 #7F583F 和 #f7EFD2*/
變量大小寫敏感、變量名等這些參考 js 變量名規則肯定不會錯，而變量名中存儲的值的書寫規則仍然采用 css 的規則，如：  --x: 20px 30px  而不是 --x: '20px 30px' 。

變量使用：var() 函數

var() 函數是用來讀取變量，如下例：

a {--foo：#f1f2f5;--bar: red;color: var(--foo);text-decoration-color: var(--bar);
}

var() 函數有第二個參數，表示變量的默認值，如果該變量不存在(第一個參數)，那么就使用這個默認值。并且，第一個參數后面的全部算第二個參數，不管有多少個逗號，比如：

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

另外， var() 函數也可作為其他變量的值，但也僅作為其他變量的值使用：

html{--primary-color: red;--logo-text: var(--primary-color);/* 無效 */  var(--primary-color): green;  
}

變量作用域

css變量遵從 css優先級的原則 變量值會被覆蓋

  	html {--color: blue;}div {--color: green;}#alert {--color: red;}* {color: var(--color);}

<p> 我的顏色為 blue</p>
<div>我的顏色為 green</div>
<div id="alert">我的顏色為 red</div>