這禮拜忙了些，只好先偷懶打張安牌。這邊就記一下前陣子同學弄主題切換時用到的 CSS 變數（Variables）功能用法

原本使用 CSS 時就會有許多重複使用的部分，例如說網站的主色彩和副色彩等，然而在管理上，或是要修改的時候就會很麻煩，通常都要另外借助工具來處理。然而 CSS 其實原生就有變數可以使用，大大地增加了改動時的方便性。用法上也相當簡單。

在 CSS 宣告變數時，建議放在 :root 裡，並使用 --變數名 的方式宣告。例如

:root{
    --color: #000000;
}

而使用的時候只要 var(--變數名) 就可以囉。例如

body {
  background: var(--color);
}

平時使用也常搭配 CSS 的 clac 及 JS 的 document.documentElement.style.setProperty 來處理，這部分就直接看範例吧。 以下附上調色盤 Codepen 作為範例，用法主要參考 CSS Variables 這篇。

See the Pen CSS 變數測試：調色盤 by IGOU (@igouist) on CodePen.

參考資料