最近太無聊，研究下CSS，發(fā)現(xiàn)了css可以自定義變量，是我跟不上時(shí)代的步伐了嘛？這可不行，我還是要緊跟上的。就了解了下。
總結(jié)下方便以后忘記了回顧。
這個(gè)寫法的好處可能是減少了css代碼冗余的問題吧
1.聲明自定義變量，CSS中變量的定義方法是以兩個(gè)“破折號”開頭，后面跟變量名
:root{
--main-color:#54BBCE;
}
估計(jì)大家會問為啥用:root?
因?yàn)橛?root能夠在整個(gè)文檔中訪問它。如果我們只在特定的選擇器中定義變量，那么只對那個(gè)選擇器可用。
2.使用自定義變量，我們要用到關(guān)鍵字var()，var關(guān)鍵字有兩個(gè)參數(shù)。第一個(gè)是要替換的自定義屬性的名稱，第二個(gè)是回退值，在引用的自定義屬性無效時(shí)使用。
p{
color: var(--main-color);
background-color: var(--main-colors, #999AAA);
}
p{
font-size: var(--main-color, 30px);
}
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>簡潔css</title>
<style>
/*
聲明自定義變量
CSS中變量的定義方法是以兩個(gè)“破折號”開頭，后面跟變量名
*/
:root{
--main-color:#54BBCE;
}
/**
使用自定義變量
*/
p{
color: var(--main-color);
}
</style>
</head>
<body>
<p>css變量</p>
</body>
</html>
