使用語法
首先我們先來看一個例子：
html代碼：
<div class="element">這是一段文字</div>
css代碼：
.element { width:200px; height:200px; --main-bg-color: #000; color:#fff; background-color: var(--main-bg-color); }
實現效果：
結果是該DOM元素背景變成了黑色。
CSS中原生的變量定義語法是：--*，變量使用語法是：var(--*)，其中*表示我們的變量名稱。關於命名這個東西，各種語言都有些顯示，例如CSS選擇器不能是數字開頭，JS中的變量是不能直接數值的，但是，在CSS變量中，這些限制通通沒有，例如：
:root{ --main-bg-color: #000; } .element { background-color: var(--main-bg-color); }
注意：變量名稱不能包含
$，[，^，(，%等字符，普通字符局限在只要是“數字[0-9]”“字母[a-zA-Z]”“下划線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文，例如：
.element { width:200px; height:200px; --黑色: #000; color:#fff; background-color: var(--黑色); }
css變量完整語法：
CSS變量使用的完整語法為：var( [, ]? )，用中文表示就是：var( <自定義屬性名> [, <默認值 ]? )，也即是如果我們沒有定義變量名稱，那么就會使用后面的值作為其默認屬性值。
如下：
.element { background-color: var(--new-bg-color,#EE0000); }
得到的結果當然是后面顏色的值的背景。
我們來看一下如果變量名稱不合法會出現什么結果，看下面例子：
body { --color: 20px; background-color: #369; background-color: var(--color, #cd0000); }
請問，此時<body>的背景色是？
- A. transparent
- B. 20px
- C. #369
- D. #cd0000
答案是：A. transparent
CSS變量中，果發現變量值是不合法的，例如上面背景色顯然不能是20px，則使用背景色的缺省值，也就是默認值代替，於是，上面CSS等同於：
body { --color: 20px; background-color: #369; background-color: transparent; }
css變量在js中的應用
看如下例子，html代碼：
<div id="jsDom">這是一段文字</div>
css代碼：
#jsDom { --my-varwidth: 200px; background-color: #000; color:#fff; width:var(--my-varwidth); height:200px; }
js代碼：
var element = document.getElementById('jsDom'); var curWidth = getComputedStyle(element).getPropertyValue("--my-varwidth"); console.log(curWidth); //200px //設置過后該DOM元素的寬度變為了300px element.style.setProperty("--my-varwidth", '300px');
如果樣式是寫到行間呢？那么進行如下操作：
html代碼：
<div id="jsDom" style="--my-varwidth:400px;width:var(--my-varwidth);">這是一段文字</div>
js代碼：
var element = document.getElementById('jsDom'); var curWidth = element.style.getPropertyValue("--my-varwidth"); console.log(curWidth); //400px
瀏覽器兼容
瀏覽器的兼容如圖所示：
到目前位置IE11也不支持該css變量。
說到這兒感覺這個css變量也是很強大的，那么它跟預處理器比較，你覺得哪個更好？下面講一下預處理器的劣勢。
預處理器劣勢
預處理器變量不是實時的
也許令新手驚訝的是，預處理器局限性最常見的情況是Sass無法在媒體查詢中定義變量或使用@extend。
$gutter: 1em; @media (min-width: 30em) { $gutter: 2em; } .Container { padding: $gutter; }
上面代碼將編譯為：
.Container { padding: 1em; }
上面結果可以看出來，媒體查詢塊被丟棄，變量賦值被忽略。
由於無法在匹配@media規則的基礎上改變變量，所以唯一的選擇是為每個媒體查詢分配一個唯一的變量，並單獨編寫每個變體。
預處理器變量不能級聯
每當使用變量，作用域的問題就不可避免的出現。這個變量應該設置為全局變量嗎？是否應該限定其范圍為文件或模塊？是否應該限制在塊中？
由於CSS最終目的是為HTML添加樣式，事實證明還有另一種有效的方法給變量限定作用域：DOM元素。但由於預處理器不在瀏覽器中運行並且無法看到標記，它們不能這樣做。
假設有一個網站，面對偏好較大文字的用戶，就向<html>元素添加類user-setting-large-text。當設置了這個類時，應當應用較大的$font-size變量賦值：
$font-size: 1em; .user-setting-large-text { $font-size: 1.5em; } body { font-size: $font-size; }
但同樣，就像上面的媒體塊示例，Sass完全忽略了該變量的賦值，這意味着這是不可能發生的。編譯后的代碼如下：
body { font-size: 1em; }
預處理器變量不繼承
雖然繼承嚴格說來是級聯的一部分，之所以把它單獨分出來講，是因為多次想調用這個特性卻不得。
假設一種情況，要在DOM元素上基於其父元素應用的顏色而設置樣式：
.alert { background-color: lightyellow; } .alert.info { background-color: lightblue; } .alert.error { background-color: orangered; } .alert button { border-color: darken(background-color, 25%); }
上面的代碼並不是有效的Sass（或CSS），但你應該明白它想達到什么目的。
最后一句聲明試圖在<button>元素從父元素.alert元素繼承的background-color屬性使用Sass的darken函數。如果類info 或error已經加在了.alert上（或如果background-color已通過JavaScript或用戶樣式設置），button元素能據此作出相應的響應。
顯然這在Sass中行不通，因為預處理器不知道DOM結構，但希望你清楚的認識到為什么這類東西是有用的。
調用一個特定的用例：出於可訪問性的原因，在繼承了DOM屬性上運行顏色函數是極其方便的。例如，確保文本始終可讀，並充分與背景顏色形成鮮明對比。 有了自定義屬性和新的CSS顏色函數，很快這將成為可能。
預處理器變量不可互操作
這是預處理器相對明顯的一個缺點，提到它是因為我覺得它重要。如果你正使用PostCSS來構建網站，想使用只能通過Sass實現主題化的第三方組件，那你真是不走運了。
跨不同的工具集或CDN上托管的第三方樣式表共享預處理器變量是不可能（或至少不容易）的。
原生的CSS自定義屬性可以與任何CSS預處理器或純CSS文件一起使用。反之則不然。
下面給一個css變量在媒體查詢中的使用：
:root { --gutter: 1.5em; } @media (min-width: 30em) { :root { --gutter: 2em; } } @media (min-width: 48em) { :root { --gutter: 3em; } }
如果是預處理器這樣寫就無效了。
實例：CSS變量讓你輕松制作響應式網頁
html代碼：
<h1>這是標題</h1> <div class="warpper"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> </div>
css代碼：
html,body{padding:0;margin:0;} :root { --base-font-size: 30px; --columns: 200px 200px; --base-margin: 30px; } @media all and (max-width: 450px) { :root { --columns: 200px; --base-margin: 15px; --base-font-size: 20px; } } h1 { font-size: var(--base-font-size); margin: var(--base-margin) ; } .warpper { display: grid; margin: var(--base-margin) ; grid-template-columns: var(--columns); } .item{text-align: center;font-size:20px;color:#fff;height:40px;line-height: 40px;} .item1{background:#acf4b6;} .item2{background:#ffe975;} .item3{background:#5efffa;} .item4{background:#e6b4fd;}
實現效果，如果寬度超過450px，如圖所示：
如果寬度小於450px，如圖所示：
參考
Using CSS custom properties (variables)
小tips:了解CSS/CSS3原生變量var
我為什么對原生CSS變量感到興奮