這個重要的 CSS 新功能姐扮，所有主要瀏覽器已經(jīng)都支持了。本文全面介紹如何使用它关筒，你會發(fā)現(xiàn)原生 CSS 從此變得異常強大溶握。
一、變量的聲明
聲明變量的時候蒸播，變量名前面要加兩根連詞線（--）
上面代碼中睡榆，body選擇器里面聲明了兩個變量：--foo和--bar .
它們與color、font-size等正式屬性沒有什么不同袍榆，只是沒有默認含義胀屿。所以 CSS 變量（CSS variable）又叫做“CSS 自定義屬性”（CSS custom properties）。因為變量與自定義的 CSS 屬性其實是一回事包雀。
你可能會問宿崭，為什么選擇兩根連詞線（--）表示變量？因為$foo被 Sass 用掉了才写，@foo被 Less 用掉了葡兑。為了不產(chǎn)生沖突奖蔓，官方的 CSS 變量就改用兩根連詞線了。
各種值都可以放入 CSS 變量讹堤。
變量名大小寫敏感吆鹤，--header-color和-Header-color是兩個不同變量
二、var() 函數(shù)
var()函數(shù)用于讀取變量洲守。
var()函數(shù)還可以使用第二個參數(shù)疑务，表示變量的默認值。如果該變量不存在梗醇，就會使用這個默認值知允。
第二個參數(shù)不處理內(nèi)部的逗號或空格，都視作參數(shù)的一部分叙谨。
var()函數(shù)還可以用在變量的聲明温鸽。
注意，變量值只能用作屬性值手负，不能用作屬性名嗤朴。
上面代碼中，變量--side用作屬性名虫溜，這是無效的
三雹姊、響應(yīng)式布局
CSS 是動態(tài)的，頁面的任何變化衡楞，都會導(dǎo)致采用的規(guī)則變化吱雏。
利用這個特點，可以在響應(yīng)式布局的media命令里面聲明變量瘾境，使得不同的屏幕寬度有不同的變量值歧杏。
四、兼容性處理
對于不支持 CSS 變量的瀏覽器迷守，可以采用下面的寫法犬绒。
[圖片上傳失敗...(image-353e0a-1553331017794)]
也可以使用@support命令進行檢測。
五兑凿、JavaScript 操作
JavaScript 也可以檢測瀏覽器是否支持 CSS 變量凯力。
JavaScript 操作 CSS 變量的寫法如下。
這意味著礼华，JavaScript 可以將任意值存入樣式表咐鹤。下面是一個監(jiān)聽事件的例子，事件信息被存入 CSS 變量圣絮。
那些對 CSS 無用的信息祈惶，也可以放入 CSS 變量。
上面代碼中，--foo的值在 CSS 里面是無效語句捧请，但是可以被 JavaScript 讀取凡涩。這意味著，可以把樣式設(shè)置寫在 CSS 變量中疹蛉，讓 JavaScript 讀取突照。
在學(xué)習(xí)前端過程中遇到任何困難不懂的都可以加入我的學(xué)習(xí)群，多多交流問題氧吐，互相幫助，群里有不錯的學(xué)習(xí)教程末盔，每晚還有免費高清課程交流分享筑舅，不論你是小白還是大牛都能少走彎路。Web前端交流秋秋裙：554224926陨舱，QQ：747728734
