摘要：但由于預(yù)處理器不在瀏覽器中運(yùn)行并且無(wú)法看到標(biāo)記，它們不能這樣做。跨不同的工具集或上托管的第三方樣式表共享預(yù)處理器變量是不可能或至少不容易的。原生的自定義屬性可以與任何預(yù)處理器或純文件一起使用。

首先我們先來(lái)看一個(gè)例子：
html代碼：

這是一段文字

css代碼：

.element {
  width:200px;
  height:200px;
  --main-bg-color: #000;
  color:#fff;
  background-color: var(--main-bg-color);
}

實(shí)現(xiàn)效果：

結(jié)果是該DOM元素背景變成了黑色。

CSS中原生的變量定義語(yǔ)法是：--*，變量使用語(yǔ)法是：var(--*)，其中*表示我們的變量名稱。關(guān)于命名這個(gè)東西，各種語(yǔ)言都有些顯示，例如CSS選擇器不能是數(shù)字開頭，JS中的變量是不能直接數(shù)值的，但是，在CSS變量中，這些限制通通沒(méi)有，例如：

:root{
    --main-bg-color: #000;
}
.element {
    background-color: var(--main-bg-color);
}

注意：變量名稱不能包含$，[，^，(，%等字符，普通字符局限在只要是“數(shù)字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文，例如：

.element {
  width:200px;
  height:200px;
  --黑色: #000;
  color:#fff;
  background-color: var(--黑色);
}

css變量完整語(yǔ)法：
CSS變量使用的完整語(yǔ)法為：var( [, ]? )，用中文表示就是：var( <自定義屬性名> [, <默認(rèn)值 ]? )，也即是如果我們沒(méi)有定義變量名稱，那么就會(huì)使用后面的值作為其默認(rèn)屬性值。
如下：

.element {
    background-color: var(--new-bg-color,#EE0000);
}

得到的結(jié)果當(dāng)然是后面顏色的值的背景。

我們來(lái)看一下如果變量名稱不合法會(huì)出現(xiàn)什么結(jié)果，看下面例子：

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}

請(qǐng)問(wèn)，此時(shí)的背景色是？

A. transparent

B. 20px

C. #369

D. #cd0000

答案是：A. transparent
CSS變量中，果發(fā)現(xiàn)變量值是不合法的，例如上面背景色顯然不能是20px，則使用背景色的缺省值，也就是默認(rèn)值代替，于是，上面CSS等同于：

body {
    --color: 20px;
    background-color: #369;
    background-color: transparent;
}

看如下例子，html代碼：

這是一段文字

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

//設(shè)置過(guò)后該DOM元素的寬度變?yōu)榱?00px
element.style.setProperty("--my-varwidth", "300px");

如果樣式是寫到行間呢？那么進(jìn)行如下操作：
html代碼：

這是一段文字

js代碼：

var element = document.getElementById("jsDom");
var curWidth = element.style.getPropertyValue("--my-varwidth");
console.log(curWidth); //400px

瀏覽器的兼容如圖所示：

到目前位置IE11也不支持該css變量。

說(shuō)到這兒感覺這個(gè)css變量也是很強(qiáng)大的，那么它跟預(yù)處理器比較，你覺得哪個(gè)更好？下面講一下預(yù)處理器的劣勢(shì)。

也許令新手驚訝的是，預(yù)處理器局限性最常見的情況是Sass無(wú)法在媒體查詢中定義變量或使用@extend。

$gutter: 1em;
@media (min-width: 30em) {
     $gutter: 2em; 
} 
 .Container { 
     padding: $gutter; 
 }

上面代碼將編譯為：

.Container { 
     padding: 1em;
 }

上面結(jié)果可以看出來(lái)，媒體查詢塊被丟棄，變量賦值被忽略。

由于無(wú)法在匹配@media規(guī)則的基礎(chǔ)上改變變量，所以唯一的選擇是為每個(gè)媒體查詢分配一個(gè)唯一的變量，并多帶帶編寫每個(gè)變體。

每當(dāng)使用變量，作用域的問(wèn)題就不可避免的出現(xiàn)。這個(gè)變量應(yīng)該設(shè)置為全局變量嗎？是否應(yīng)該限定其范圍為文件或模塊？是否應(yīng)該限制在塊中？

由于CSS最終目的是為HTML添加樣式，事實(shí)證明還有另一種有效的方法給變量限定作用域：DOM元素。但由于預(yù)處理器不在瀏覽器中運(yùn)行并且無(wú)法看到標(biāo)記，它們不能這樣做。

假設(shè)有一個(gè)網(wǎng)站，面對(duì)偏好較大文字的用戶，就向元素添加類user-setting-large-text。當(dāng)設(shè)置了這個(gè)類時(shí)，應(yīng)當(dāng)應(yīng)用較大的$font-size變量賦值：

$font-size: 1em;
.user-setting-large-text {
    $font-size: 1.5em;
} 
body { 
    font-size: $font-size; 
}

但同樣，就像上面的媒體塊示例，Sass完全忽略了該變量的賦值，這意味著這是不可能發(fā)生的。編譯后的代碼如下：

body { 
    font-size: 1em;
}

雖然繼承嚴(yán)格說(shuō)來(lái)是級(jí)聯(lián)的一部分，之所以把它多帶帶分出來(lái)講，是因?yàn)槎啻蜗胝{(diào)用這個(gè)特性卻不得。

假設(shè)一種情況，要在DOM元素上基于其父元素應(yīng)用的顏色而設(shè)置樣式：

.alert {
    background-color: lightyellow;
}
.alert.info {
    background-color: lightblue;
}
.alert.error {
    background-color: orangered;
}

.alert button {
    border-color: darken(background-color, 25%);
}

上面的代碼并不是有效的Sass（或CSS），但你應(yīng)該明白它想達(dá)到什么目的。

最后一句聲明試圖在元素從父元素.alert元素繼承的background-color屬性使用Sass的darken函數(shù)。如果類info 或error已經(jīng)加在了.alert上（或如果background-color已通過(guò)JavaScript或用戶樣式設(shè)置），button元素能據(jù)此作出相應(yīng)的響應(yīng)。

顯然這在Sass中行不通，因?yàn)?b>預(yù)處理器不知道DOM結(jié)構(gòu)，但希望你清楚的認(rèn)識(shí)到為什么這類東西是有用的。

調(diào)用一個(gè)特定的用例：出于可訪問(wèn)性的原因，在繼承了DOM屬性上運(yùn)行顏色函數(shù)是極其方便的。例如，確保文本始終可讀，并充分與背景顏色形成鮮明對(duì)比。 有了自定義屬性和新的CSS顏色函數(shù)，很快這將成為可能。

預(yù)處理器變量不可互操作

這是預(yù)處理器相對(duì)明顯的一個(gè)缺點(diǎn)，提到它是因?yàn)槲矣X得它重要。如果你正使用PostCSS來(lái)構(gòu)建網(wǎng)站，想使用只能通過(guò)Sass實(shí)現(xiàn)主題化的第三方組件，那你真是不走運(yùn)了。

跨不同的工具集或CDN上托管的第三方樣式表共享預(yù)處理器變量是不可能（或至少不容易）的。

原生的CSS自定義屬性可以與任何CSS預(yù)處理器或純CSS文件一起使用。反之則不然。

下面給一個(gè)css變量在媒體查詢中的使用：

:root {
    --gutter: 1.5em;
}

@media (min-width: 30em) {
    :root {
        --gutter: 2em;
    }
}
@media (min-width: 48em) {
    :root {
        --gutter: 3em;
    }
}

如果是預(yù)處理器這樣寫就無(wú)效了。

參考

Using CSS custom properties (variables)
小tips:了解CSS/CSS3原生變量var
我為什么對(duì)原生CSS變量感到興奮