建立 2025-02-25 更新 2026-09-11

CSS 變數（Custom Properties）

變數讓顏色、間距、層級只定義一次。改 --brand 就能換主題，不必滿專案搜尋色碼。

定義與使用

名稱以 -- 開頭，用 var() 讀取：

:root {
  --brand: #264de4;
  --text: #1b1b1b;
  --space: 0.5rem;
  --radius: 12px;
}

.btn {
  background: var(--brand);
  color: white;
  padding: calc(var(--space) * 2) calc(var(--space) * 3);
  border-radius: var(--radius);
}

:root 等於 html 但權重更高一點，適合放全域 token。

作用域

變數會繼承。元件裡覆寫後，只有子孫吃得到新值：

.card { --card-bg: white; background: var(--card-bg); }
.card.inverse { --card-bg: #111; color: white; }

未定義時可給後備：

color: var(--heading, var(--text, #222));

var() 不能當屬性名，也不能單獨做 calc() 裡「兩個變數相鄰」而不寫運算子。單位常直接含在變數裡，或只存數字再乘：

:root { --n: 4; }
.pad { padding: calc(var(--n) * 4px); }

主題切換

:root {
  color-scheme: light dark;
  --bg: #fff;
  --text: #1b1b1b;
}

[data-theme="dark"] {
  --bg: #121212;
  --text: #f3f3f3;
}

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

JavaScript 只改一個屬性即可：

document.documentElement.dataset.theme = "dark";
document.documentElement.style.setProperty("--brand", "#7c4dff");

搭配 @media (prefers-color-scheme: dark) 可在使用者沒選時跟隨系統。

與媒體查詢

:root { --nav-h: 3.5rem; }

@media (width >= 60rem) {
  :root { --nav-h: 4rem; }
}

.main { padding-top: var(--nav-h); }

元件不必各自寫斷點，只消費變數。

總結

做法	說明
`--name: value`	定義
`var(--name, fallback)`	讀取
`:root`	全域 token
元件內覆寫	局部主題
JS `setProperty`	執行期換色

數學與顏色混和見函式。