最近太無聊匣椰，研究下CSS裆熙，發(fā)現(xiàn)了css可以自定義變量，是我跟不上時代的步伐了嘛禽笑？這可不行入录，我還是要緊跟上的。就了解了下佳镜。
總結(jié)下方便以后忘記了回顧纷跛。
這個寫法的好處可能是減少了css代碼冗余的問題吧
1.聲明自定義變量，CSS中變量的定義方法是以兩個“破折號”開頭邀杏，后面跟變量名
:root{
--main-color:#54BBCE;
}
估計大家會問為啥用:root?
因?yàn)橛?root能夠在整個文檔中訪問它。如果我們只在特定的選擇器中定義變量唬血，那么只對那個選擇器可用望蜡。
2.使用自定義變量，我們要用到關(guān)鍵字var()拷恨，var關(guān)鍵字有兩個參數(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中變量的定義方法是以兩個“破折號”開頭芦疏，后面跟變量名
*/
:root{
--main-color:#54BBCE;
}
/**
使用自定義變量
*/
p{
color: var(--main-color);
}
</style>
</head>
<body>
<p>css變量</p>
</body>
</html>
