原來 CSS 也有原生變數可以使用
之前使用 SCSS 慣了,每次如果想要在樣式表使用變數就會直覺想到使用預處理器,結果前陣子才發現原生的 CSS 也有變數功能可以使用,那就來記錄一下吧。
設定方式
首先 CSS 原生變數的語法是這樣設定的:
1 |
|
變數的設定都會放在 :root
選取器內。
變數使用方式
假設我希望 <header></header>
區塊內的背景顏色可以使用 --bg-primary
的橘色,CSS 可以這樣撰寫(不過通常不會直接使用標籤選擇器設定樣式就是了,這裡僅為範例):
1 |
|
反正就是在屬性值撰寫 var(--變數名稱)
這樣格式。
參考資料
希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。
如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:
- 將我的部落格加入書籤,隨時造訪部落格。
- 將我的文章分享給你的親朋好友。
- 透過 LikeButton 幫我按 5 下讚。
- 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)
本站所有文章除特別聲明外,均採用 BY-NC-SA 許可協議。轉載請註明出處!