原來 CSS 也有原生變數可以使用

之前使用 SCSS 慣了，每次如果想要在樣式表使用變數就會直覺想到使用預處理器，結果前陣子才發現原生的 CSS 也有變數功能可以使用，那就來記錄一下吧。

設定方式

首先 CSS 原生變數的語法是這樣設定的：

1
2
3
4
:root {
    --變數名稱: 變數值;
    --bg-primary: orange;
}

變數的設定都會放在 :root 選取器內。

變數使用方式

假設我希望 <header></header> 區塊內的背景顏色可以使用 --bg-primary 的橘色，CSS 可以這樣撰寫（不過通常不會直接使用標籤選擇器設定樣式就是了，這裡僅為範例）：

1
2
3
header {
    background-color: var(--bg-primary);
}

反正就是在屬性值撰寫 var(--變數名稱) 這樣格式。

參考資料