[CSS3] CSS 中使用變數 - var

CSS3 中多了一個好用的東西，可以讓我們設定變數以供其他地方使用，應用在如 color相關的 css 設定 特別好用。

這個好用的屬性就是  var ，顧名思義就是 variable 的意思

瀏覽器的支援度可參考這篇
https://www.w3schools.com/css/css3_variables.asp

變數的設定，通常是寫在 root 以作為全域的預設的變數，但也可以寫在任何 tag 裡面，如以下範例：

:root {
    --main-color: #ff0;
    --secondary-color: #f00;
}

h1 {
    color: var(--main-color);
}
p {
    color: var(--secondary-color, #000);
}

上面的例子中，我們建立了兩個變數

1. --main-color
2. --secondary-color

可以注意到 p 使用的語法後面多了一個參數，那代表的是預設值，當前面的變數沒找到的時候，就會直接使用預設值