原來 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(--變數名稱) 這樣格式。

參考資料

希望我的文章能夠幫助到你，有任何問題或是想與我討論交流，歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章，想支持我繼續撰寫更多文章，歡迎你：

  1. 將我的部落格加入書籤，隨時造訪部落格。
  2. 將我的文章分享給你的親朋好友。
  3. 透過 LikeButton 幫我按 5 下讚。
  4. 每月贊助 LikeCoin 請我喝杯咖啡。（雖然我不喝咖啡啦 XD）