1. 程式人生 > >CSS中的 “var()” 和 “:root”

CSS中的 “var()” 和 “:root”

最近在網上看到一種CSS寫法,之前不怎麼見過。出於學習查了一下。特此記錄
在這裡插入圖片描述
原來這些僅僅是自定義的css屬性,在需要的時候可以使用var()函式引用
關於var()函式的作用和使用方法,參考:
MDN

var()

var()函式可以代替元素中任何屬性中的值的任何部分。var()函式不能作為屬性名、選擇器或者其他除了屬性值之外的值。(這樣做通常會產生無效的語法或者一個沒有關聯到變數的值。)

:root

:root是一個偽類,表示文件根元素,非IE及ie8及以上瀏覽器都支援,在:root中宣告相當於全域性屬性,只要當前頁面引用了:root segment所在檔案,都可以使用var()來引用

eg:

:root {
  --main-bg-color: pink;
}

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

在這裡插入圖片描述