原來 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)