CSS變數簡介

如今的瀏覽器開發似乎正好取代了流行的庫和擴充套件目前為我們提供的功能。 ECMAScript 6幾乎完全沒有jQuery，而十字線中的下一個似乎是CSS前處理器，如SASS和LESS。 現代版Firefox和Chrome   CSS變數（也稱為CSS自定義屬性），允許您直接在CSS中定義變數，然後可以在樣式表中的任何位置引用變數，甚至可以使用JavaScript進行操作。 結果是一個類固醇的CSS前處理器，一個在瀏覽器中本機執行以啟動。 隨著IE Edge希望儘快支援這一功能，這些令人興奮的時刻確實是一個前端開發人員。 讓我們看看本教程中的CSS變數是什麼。

基本語法

使用CSS變數是一個簡單的兩步過程：

1. 使用語法在選擇器內定義CSS變數  --myvariable 。 選擇器根據正常的CSS繼承和特異性規則確定變數的範圍及其適用的位置。  :root 例如， 在 選擇器 內定義的CSS變數 可用於文件中的所有較低階別選擇器（元素）。
2. 使用語法引用CSS變數  var(--myvariable)  作為靜態CSS屬性值的替代。

現在讓我們看一個基本的例子，把踏板放到金屬上！

這裡我定義了兩個包含  :root 選擇器 內部顏色值的CSS變數  。 內部定義變數的選擇器設定其範圍，所有降序選擇器（元素）都能夠訪問這些變數。 在  :root  選擇器中 定義CSS變數 基本上使它們全域性可用。 此時，變數尚未應用於任何地方，處於休眠狀態並準備好使用。 需要注意的是CSS變數情況不像其他的CSS屬性敏感，因此  --maincolor 和  --Maincolor 被認為是兩個不同的變數。

要使用CSS變數，我們使用  var()  函式 訪問其值 ，方法是將變數名稱傳遞給它。 然後，我們選擇所需的CSS屬性來利用此變數的值。

您甚至可以將一個CSS變數的值全部或部分設定為另一個CSS變數：

CSS變數的級聯和繼承

CSS變數的行為與其他CSS屬性非常相似，因為它們的值級聯和繼承，與使用CSS前處理器定義的屬性不同。 以下演示 了使用CSS變數進行  級聯 ：

在這裡，我  --darkborder 在兩個不同的選擇器中兩次 定義了相同的 CSS變數。 由於級聯規則，BODY選擇器內部的規則具有更高的特異性，並且在IMG元素中使用時會勝出。

CSS變數也 預設  繼承 ，因此在父元素上定義的CSS屬性的值在這些元素中使用時會向下滲透到子元素。 我們在下面的示例中看到了這一點，其中使用UL元素上的CSS變數定義的UL邊界也自動應用於子UL：

輸出截圖：

禁用繼承

我們可以透過將CSS變數設定  initial 為所需選擇器內的 特殊值“  ”  來阻止CSS變數在某個級別繼承 。 這樣做會將該屬性重置為在該範圍級別預設為“空”。 例如，要通用地禁用CSS變數的繼承，我們可以執行以下操作：

考慮下一個示例，該示例禁用  --myborder  UL UL級別 的 變數 繼承 ，因此在UL級別應用的變數不會向下傳遞到其後代 :

輸出截圖：

重置CSS變數的值使您可以使用乾淨的平板，其中有多個CSS作者在頁面上工作，並且可能存在重複的變數名稱和非預期的繼承。

使用calc（）函式構建值

CSS變數也可以與  函式 一起使用，  因此數值可以是動態的，使CSS變數更接近JavaScript變數：     calc()

這裡我將一個CSS變數設定為一個數字，然後使用該   calc() 函式匯出H1和H2元素的下邊距，這樣後者就是前一個元素的一半。 在  calc() 函式 內部 ，為了匯出實際單位（即：畫素），我們對該單元執行乘法運算，例如乘以   --bottomgap 1px。 簡單地將單元附加到變數的末尾將不起作用：

您也可以簡單地設定  --bottomgap 為開始時的實際長度，例如30px，並透過將H2除以2來計算H2元素的一半（除法運算的右側必須始終為數字）。 有關 可接受語法的更多詳細資訊， 請參閱該   函式 。     calc()

CSS變數和JavaScript

甚至可以使用JavaScript訪問和設定CSS變數，透過僅更改CSS變數值來簡化CSS樣式的操作方式。 以下是獲取和設定CSS變數值的兩種JavaScript方法，無論屬性是直接在元素上定義還是繼承：

要  :root 在JavaScript中 訪問 元素/選擇器，請使用   document.documentElement 。 當CSS變數的值更改時，瀏覽器會自動重新繪製以反映更改。 您甚至可以將一個CSS變數的值設定為另一個CSS變數，從而在CSS值之間建立相互依賴性，從而產生有趣的效果：

以下示例透過僅使用JavaScript更新CSS變數來建立一個CSS條形時鐘，該時鐘告訴當前時間。 每個CSS變數分別以當前的24小時，60分鐘或60秒的百分比形式輸入當前的小時，分鐘或秒。 例如，下午6點將轉換為6/24，或小時欄位的25％。 我們使用這些值來確定每個條中要移動（變換）的背景偽元素的數量。 結果如下：

JavaScript與CSS之間的唯一互動是CSS變數本身 - CSS變數為JavaScript開闢了一種新的，可以說是更清晰的方式來操縱CSS。

內聯設定CSS變數

CSS變數也可以在元素上內聯定義或設定，這樣您就可以調整單個元素的CSS變數值。 假設您已在樣式表中設定了兩個CSS變數，以定義UL內連結的靜止和懸停背景顏色。 但是，對於特定連結，您希望兩種顏色與其他顏色不同。 覆蓋連結中兩個CSS變數的預設值將是一種方法：

定義未定義CSS變數時的回退值

當使用帶有該  var(--cssvariable) 函式 的CSS變數時 ，可以使用第二個引數填充該函式，該引數在未定義程式變數的情況下成為回退值。 例如：

如您所見，回退值本身可以是另一個CSS   var()  函式，在未定義變數的情況下，該函式又可以包含另一個回退值。

CSS變數回退顯然只能由支援CSS變數的瀏覽器獲取。 要為不支援該功能的瀏覽器提供後備值，您可以執行以下操作：

現在大家都開心了！

結論

像SASS這樣的CSS前處理器在前端開發人員中得到了廣泛的採用，儘管它們的編譯本身固有地限制了它們的功能。 與CSS前處理器不同，CSS變數是常規，級聯和繼承，就像常規CSS屬性一樣，甚至可以使用JavaScript進行操作。 但也許CSS變數的最大優點是瀏覽器本身支援它們，消除了即使是新手Web開發人員潛入的任何技術障礙。