CSS中的變量給了我們諸多優(yōu)點：方便、代碼重用、更可靠的代碼庫和提升防錯能力。
示例

基礎(chǔ)

當使用CSS變量時，你應(yīng)該了解的三個主要組成：

    自定義屬性
    var()函數(shù)
    :root偽類

自定義屬性

你已經(jīng)知道了一些CSS的標準屬性，如color,margin,width和font-size。
下面的示例使用了CSS的color屬性：

自定義屬性僅意味著我們（創(chuàng)建CSS文件的人）去定義屬性的名字。
為了自定義一個屬性名，我們需要用--作為前綴。
如果我們要創(chuàng)建一個值為黑色的、名為text-color的自定義屬性，可以這樣做：

var()函數(shù)

為了應(yīng)用自定義屬性，需要利用var()函數(shù)，否則瀏覽器不知道他們代表什么。
如果想要在p、h1和h2中的樣式中使用--text-color，可以這樣使用var()函數(shù)：

其等價于：

:root偽類

我們需要一個地方來放置自定義屬性。雖然可以在任何樣式規(guī)則中指定自定義屬性，但到處定義屬性并不是一個好主意，這對CSS的可維護性和可閱讀性是一個挑戰(zhàn)。

:root 偽類代表了HTML文檔的根元素，這是一個放置自定義屬性的好位置，因為我們可以通過其他更具特異性的選擇器來覆蓋自定義屬性值。
CSS變量的好處
可維護性

在一個Web開發(fā)項目中，我們經(jīng)常重復(fù)使用一個特定的CSS屬性值：

當需要改變某些屬性值時，問題就會暴露出來了。
如果我們手動的改變屬性值，尤其是當CSS文件很大時，不僅會花費大量時間，還可能會范一些錯誤。同樣的，如果我們執(zhí)行一個批處理查找和替換,就可能會無意中影響其他樣式規(guī)則。
我們可以使用CSS變量重寫：

假設(shè)你現(xiàn)在的客戶說由于文本顏色太亮，導(dǎo)致文本難以閱讀，想要改變文本顏色，此時，我們只需要更新一行CSS規(guī)則：

提高CSS的可讀性

自定義屬性會使樣式表更加易讀，也會使CSS屬性聲明更有語義。
將這個聲明

和下面的聲明比較一下

像yellow和18px一類的屬性值并沒有給我們?nèi)魏斡杏玫纳舷挛男畔?，但是當我們閱讀如--base-font-size和--highlight-color一樣的屬性名時，即便在其他人的代碼，我們都能馬上知道這個屬性值是在做什么。
要注意的事
大小寫敏感

自定義屬性是大小寫敏感的（和普通的CSS規(guī)則不一樣）

自定義屬性值的解析

當重復(fù)聲明自定義屬性時，其賦值遵循通常的CSS層疊和繼承規(guī)則。例如下面的示例：
HTML

CSS

當移除.container規(guī)則時，鏈接的顏色值將是green。
回退值

當使用var()函數(shù)時，可以分配一個回退的屬性值，其作為一個額外參數(shù)和第一個參數(shù)用,隔開?？聪旅娴氖纠?br />HTML

CSS

因為給var()傳遞了一個回退值參數(shù)，所以div的背景色最中被渲染成紅色。
無效值

謹防給CSS屬性分配錯誤類型的值。
在下面的示例中，由于自定義屬性--small-button被賦予一個長度單位，它被用在.small-button樣式中是無效的(譯者注：因為color的屬性類型值出錯)

避免這種情況的一個好方式是想出具有描述性的自定義屬性名稱。例如將上面的自定義屬性命名為--small-button-width
瀏覽器對CSS變量的支持

CSS變量用起來很方便，但是瀏覽器對其支持情況不太好：

最新評論