瀏覽器支持情況
主要瀏覽器基本支持缔莲，移動端開發(fā)、混合開發(fā)霉旗、微信開發(fā)都可以考慮酌予。
什么是CSS變量？
CSS變量(CSS variables)奖慌，官方稱為CSS 自定義屬性（CSS custom properties）抛虫。
CSS變量和預(yù)處理器中的變量有什么不同？
你可能已經(jīng)在CSS預(yù)處理器中嘗試過使用變量而帶來的好處了简僧，比如Sass和Less建椰。
預(yù)處理器讓你能設(shè)置變量，以及在函數(shù)岛马、循環(huán)棉姐、數(shù)學(xué)計算等等地方中使用它們屠列。這是否意味著CSS變量已經(jīng)無關(guān)緊要了呢囊咏？
那可未必抚恒，主要是因為，CSS變量與預(yù)處理器中的變量其實是不同的東西咐蚯。
這些不同基于一個事實：CSS變量是瀏覽器中直接可用的CSS屬性乃坤，而預(yù)處理中的變量是用于編譯成常規(guī)的CSS代碼苛让，瀏覽器其實對它們一無所知。
這意味著湿诊，你可以在樣式表中狱杰，在內(nèi)聯(lián)樣式中，在SVG的標(biāo)簽中直接更新CSS變量厅须，甚至可以在運行時用JavaScript直接修改它仿畸。而你是無法對預(yù)處理器中的變量做上面這些操作的。CSS 變量提供了 JavaScript 與 CSS 通信的一種途徑朗和。
不是說你必須要在兩者間做出選擇：沒有什么東西限制你错沽，你可以同時使用CSS變量和預(yù)處理變量，并享有它們各自帶來的巨大好處眶拉。
三甥捺、CSS變量用法
1、變量的聲明
聲明變量的時候镀层，變量名前面要加兩根連詞線（--）镰禾。
你可能會問，為什么選擇兩根連詞線（--）表示變量唱逢？因為$title-color被 Sass 用掉了吴侦，@title-color被 Less 用掉了。為了不產(chǎn)生沖突坞古，官方的 CSS 變量就改用兩根連詞線了备韧。
變量名大小寫敏感，--title-color和--Title-Color是兩個不同變量痪枫。
2织堂、變量的讀取
var()函數(shù)用來讀取變量，函數(shù)還可以使用第二個參數(shù)奶陈，表示變量的默認值易阳。如果該變量不存在，就會使用這個默認值吃粒。
var()函數(shù)還可以用在變量的聲明潦俺。
變量值只能用作屬性值，不能用作屬性名。
3事示、變量值的類型
如果變量值是一個字符串早像，可以與其他字符串拼接。
如果變量值是數(shù)值肖爵，不能與數(shù)值單位直接連用卢鹦。
數(shù)值與單位直接寫在一起，這是無效的劝堪。必須使用calc()函數(shù)冀自，將它們連接。
如果變量值帶有單位幅聘，就不能寫成字符串凡纳。
4窃植、作用域
全局變量?:root偽類可以看做是一個全局作用域帝蒿，在里面聲明的變量，他下面的所有選擇器都可以拿到
局部變量
CSS變量的繼承(就近原則)巷怜。同一個 CSS 變量葛超，可以在多個選擇器內(nèi)聲明。讀取的時候延塑，優(yōu)先級最高的聲明生效绣张。這與 CSS 的"層疊"（cascade）規(guī)則是一致的。
5关带、響應(yīng)式布局
CSS 是動態(tài)的侥涵，頁面的任何變化，都會導(dǎo)致采用的規(guī)則變化宋雏。
利用這個特點芜飘，可以在響應(yīng)式布局的media命令里面聲明變量，使得不同的屏幕寬度有不同的變量值磨总。
6嗦明、兼容性處理
對于不支持 CSS 變量的瀏覽器，可以采用下面的寫法蚪燕，也可以使用@support命令進行檢測娶牌。
7、JavaScript 操作及與CSS變量的交互
JavaScript 也可以檢測瀏覽器是否支持 CSS 變量馆纳。
JavaScript 可以操作 CSS 變量诗良。
JavaScript 可以將任意值存入樣式表。下面是一個監(jiān)聽事件的例子鲁驶，事件信息被存入 CSS 變量累榜。
對 CSS 無用的信息，也可以放入 CSS 變量，這意味著壹罚，可以把樣式設(shè)置寫在 CSS 變量中葛作，讓 JavaScript 讀取。
補充知識
calc() 函數(shù)用于動態(tài)計算長度值猖凛。
需要注意的是赂蠢，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)辨泳；
任何長度值都可以使用calc()函數(shù)進行計算虱岂；
calc()函數(shù)支持 "+", "-", "*", "/" 運算；
calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運算優(yōu)先級規(guī)則菠红；
表達式中有“*”和“/”時第岖，其前后可以沒有空格，但建議留有空格试溯。
比如說“width:calc(50% + 10px)”蔑滓，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個任務(wù)交由瀏覽器去計算遇绞。
