如今互聯項目變得越來越大時，它的CSS都會變得像天文數字一樣大。龐大無序，還需要花費大量精力來整理。大型互聯網公司為解決這個問題，都會加快CSS變量成為主流。這樣能夠方便開發人員重複調用多次使用CSS屬性。現在的Sass和Less預處理器需要在使用前進行編譯。而 CSS變量，則可以在瀏覽器中輕鬆使用它們！

定義和使用

下面介紹變量在vanilla CSS中使用。變量的規則和定義與一般規則相同。使用它的方法是通過將聲明添加到：root pseudo-class 使其他選擇器都可以繼承調用。要訪問變量中的值，我們可以使用var（...）語法。但要注意區分大小寫。

支持的瀏覽器

Firefox支持CSS變量。但谷歌瀏覽器49.0或更高版本可以手動啟用。如果你的版本是Chrome 48.0，則可以通過轉到chrome：// flags /並找到啟用實驗性網絡平臺功能來啟用此項技術。

示例1——主題顏色

當需要對多個元素重複調用相同的規則時，CSS中的變量最為適用。例如：重複的主題顏色。每次想要重複使用相同的主題顏色時，可以將它放在一個變量中，而不是重複的複製和粘貼。如果用戶不喜歡選擇的藍色陰影，可以在一個地方改變風格（變量），以改變整個主題的顏色。沒有變量，不得不手動搜索並一個一個替換。下圖演示換成灰色。

示例2——複雜屬性

變量的另一個常用地方是想要保存屬性值，比如box-shadow，transform和font。這樣就可以再也不用重複記住它。通過將屬性放置在一個變量中，並可以用語義或生活中的名稱定義它，這樣更容易記住他。

示例3——最近原則

當多次聲明定製屬性時，最近原則有助於解決衝突，並且樣式表中最近的定義將覆蓋它以前的定義。

CSS變量（CSS自定義屬性）在主流互聯網公司和互聯網大型項目已經很常見了。常表現為風格統一而使用顏色變量 ；一致的組件屬性（佈局，定位等）；避免代碼冗餘等。希望本文對大家有所幫助。