[CSS] CSS變數

原生 CSS 也有支援變數的設定，可以透過以下方式使用。

:root {
  --base: #ffc600;
}
div {
  color: var(--base);
}

除了寫在 root (html) 裡面，也可以寫在元素中，會覆蓋廣域的設定。

:root {
  --base: #ffc600;
}
div {
  --base: #cccccc;
  color: var(--base);
}

有幾點值得注意：

1. 使用 — 開頭
2. 不可以作為屬性使用
3. 變數不包含單位 (如：px)
4. 可以設定 fallback 作為找不到變數的替代方案

:root {
  --base: #ffc600;
}
div {
  color: var(--notfound, red);
}

透過 JS 讀取和設定：

// 讀取
document.documentElement.style.getPropertyValue('--base');
// 設定
document.documentElement.style.setProperty('--base', '#ffc600')