CSS變量（CSS Variables）使用的方法和好處
CSS自定義變量
有過編程基礎的人對變量一詞應該不陌生。CSS 變量，即由網頁的作者或用戶定義的實體，用來指定文檔中的特定變量。更准確來說，應稱之為 CSS 自定義屬性 ，不過為更好理解稱之為 CSS 變量。然而學過CSS的人都知道，CSS 中是沒有變量而言的，要使用 CSS 變量，只能借助 SASS 或者 LESS 預編譯器。但現在，我們可以直接在CSS中定義和使用變量，接下來我們來看一個例子：
/*聲明一個變量*/:root{--bgColor: #90ffc1;}
上面代碼中，借助了結構性偽類中的 :root{ } 中，在全局 :root{ } 中定義了一個 CSS 變量，命名為 --bgColor，名字前面一定要注意符號（--），定義變量（通過var(定義義變量名)來調用。）后，接下來咱來設置一個顏色為#90ffc1的div
//CSS:root{--bgColor: #90ffc1;}.box {background:var(--bgColor);}//HTML
CSS自定義變量效果如圖
CSS 變量的層疊與作用域
CSS 變量是支持繼承的，不過這里說成級聯或者層疊更好
在 CSS 中，一個元素的實際屬性是由其自身屬性以及其祖先元素的屬性層疊得到的，CSS 變量也支持層疊的特性，當一個屬性沒有在當前元素定義，則會轉而使用其祖先元素的屬性。若當前元素有定義的屬性，將會覆蓋祖先元素
和作用域有異曲同工之處，通俗一點就是局部變量會在作用范圍內覆蓋全局變量。同名屬性
:root{--bgColor: pink;}.box {margin:20px auto 0;width: 200px;height: 200px;--bgColor: blue;}
這時生效的是--bgColor:bl
ue，而不是--bgColor:pink
css變量的層疊與作用域示意圖
注意： CSS 變量並不支持 !important
:root{--bgColor: pink !important;（不支持!important）}.box {margin:20px auto 0;width: 200px;height: 200px;--bgColor: blue;}
CSS 變量的組合
CSS 變量也可以進行組合使用,先看看下面例子：
:root{--first-word:"this";--second-word:"is";--third-word:"CSS Variable";--word-color:skyblue;}.box:before{content:var(--first-word)' 'var(--second-word)' 'var(--third-word);display: block;color:var(--word-color);}
上面boxd 的內容將會顯示為:this is CSS Variable
css變量示意圖
CSS 變量&& calc( )
CSS 變量可以和calc( ) 一起使用，來看看下面這個例子：
:root{--f-size: 14px;}.box {font-size: calc(var(--f-size) * 2);color:skyblue;text-align: center;}
CSS 變量結合 calc（），得到的最終結果是font-size:28px
CSS 變量&&calc（）示意圖
CSS 變量的好處
代碼更加簡單明了，不重復
一個網頁會使用到很多重復的樣式（色彩，字體的大小，間距），如果采用了變量來聲明，會減少瀏覽器的渲染機制，從而大大提高效率
/*你需要的統一樣式*/:root {--f-color:#ffbc9d;--t-indent:18px;--f-size:14px;}.p1 {color:var(--f-color);text-indent:var(--t-indent);font-size: var(--f-size);}.p2 {color:var(--f-color);text-indent:var(--t-indent);font-size: var(--f-size);}
我是p1
我是p2
}
小伙伴們肯定會覺得這是在搞事情，會認為直接給父級一個樣式不就可以了嗎，簡單粗暴，但由於這里CSS 改變的樣式屬性較少，當數量達到一定程度，使用 CSS 變量會是更好的選擇，有利於后期更改
精簡代碼，減少冗余，代碼更直觀，有利於響應式開發
:root {--max-width:1200px;--min-fs:20px;--color:skyblue;}.box {width:var(--max-width);height:300px;font-size:var(--min-fs);color:var(--color);}@media screen and (min-width:600px) {:root {--min-fs:18px;--color: #d0ff99;}}
至於CSS變量的兼容性可查詢 https://caniuse.com/#search=css%20var~~