CSS 變量初學者指南（又名 CSS 自定義屬性）

目錄：

• 預處理器中的 CSS 變量
• 原生 CSS 中的變量（自定義屬性）#
• 為什麼是“自定義屬性”？ #
• CSS 變量在哪裡定義？ #
• 關於 CSS 變量的技術說明 #
• 理解var()函數
• 使用帶有calc()的 CSS 變量 #
• CSS 變量的技巧 #

預處理器中的 CSS 變量

CSS 預處理器使用 CSS 變量已有 10 多年了。 我不會在這裡詳細介紹這些選項，但我認為了解每個流行的預處理器庫如何使用變量會很有幫助。

在 Sass（或 SCSS）中，你聲明變量如下：

注意美元符號 ($)。 第一行是變量及其值的聲明。 下面的兩個塊是稍後在樣式表中使用的變量示例。

Less.js 中的變量使用@符號：

在 Stylus 中，變量如下所示：

如果您想進一步研究使用這些第三方技術的變量，您可以查閱上面顯示的每個預處理器的各個文檔部分。

本機 CSS 中的變量（自定義屬性）

這將我們帶到 CSS 變量或自定義屬性，因為它們在 CSS 規範中定義。 要在純 CSS 中聲明變量，請在您為變量或屬性選擇的自定義名稱前放置兩個連字符，然後使用var()函數將該值放置在您想要的任何位置：

在這個例子中，我定義了兩個 CSS 變量： --main和--accent 。 然後我在兩個不同的元素上使用了每個 CSS 變量，展示了它們帶來的靈活性。

與任何編程語言中的變量一樣，這允許您在一個地方聲明一個變量。 如果您以後想在樣式表中的任何地方更改該值，只需更改原始聲明即可，它將應用於您使用該變量的所有位置。

為什麼是“自定義屬性”？

在日常對話中，開發人員經常將此功能稱為“CSS 變量”，這與預處理器和編程語言對同一功能的引用方式一致。 但從嚴格的技術角度來看，這些並不是真正的“變量”，而是自定義屬性。

它們與 CSS 中的任何預定義屬性具有相同的語法，除了出現在屬性名稱前面的兩個破折號。 這兩個破折號允許 CSS 作者使用任何有效的破折號標識符，而不必擔心與常規 CSS 屬性衝突。

該規範解釋說，單獨的兩個破折號是無效的（顯然保留供將來使用）並且 CSS 永遠不會賦予任何有效的破折號標識符以用作作者定義的自定義屬性之外的意義。

與常規 CSS 屬性不同，自定義屬性區分大小寫。 這意味著 --main- --main-color與--Main-Color不同。 要包含在自定義屬性名稱中的有效字符是字母、數字、下劃線和連字符。

CSS 變量在哪裡定義？

正如您在我上面提供的示例中所看到的，您經常會看到直接在 HTML 文檔或影子 DOM 的根元素上定義的 CSS 自定義屬性。 :root偽類選擇器完成了這一點。

但是 CSS 變量並不僅限於在根元素上定義，在其他地方定義它們通常是有益的。 通常選擇:root選擇器，因為它總是針對 DOM 樹中最上面的元素（無論是完整文檔還是影子 DOM）。

在大多數情況下，您可以通過在html元素（它是 HTML 文檔中的根元素）甚至是body元素上定義自定義屬性來獲得相同的結果。 使用:root可以讓代碼更加面向未來（例如，如果規範有一天添加一個新元素作為根，CSS 將保持不變），我想還允許樣式表應用於不同類型的文檔有不同的根元素。

例如，以下代碼將限制您的自定義屬性僅在.sidebar元素中使用：

出於演示目的，您經常會看到在:root上定義的變量，但您可以在任何實際可行的地方使用它們。 事實上，許多開發人員建議在初始開發期間將它們設置在 DOM 樹中較低的位置以用於較小的模塊，然後在您創建範圍更大的值時逐步向:root方向努力。

關於 CSS 變量的技術說明

除了能夠應用於任何元素之外，CSS 變量還相當靈活且易於處理。

以下是一些值得注意的事情：

• 它們通過常規的 CSS 繼承和級聯規則解決
• 您可以在媒體查詢和其他條件規則中使用它們
• 您可以在元素的style屬性中定義它們
• 可以使用 CSS 對像模型的功能讀取或設置它們。

同樣值得注意的是，您實際上可以嵌套 CSS 變量。 請注意以下示例：

請注意，我已經定義了一個--main-color變量，然後我使用相同的變量名稱作為以下 CSS 變量的值。

您也可以在 CSS 變量值中使用!important關鍵字，但這只會將“重要性”應用於與其他變量定義相關的變量本身，而不是應用於文檔中一個或多個元素的值。 如果這令人困惑，這裡有一個例子：

在上面的示例中，背景顏色將是“淺藍色”，儘管橙色稍後出現在變量定義中。 但是body元素上的背景值本身並不重要。

CSS 變量還可以包含 CSS 範圍的關鍵字值，例如initial 、 inherit和unset ，但all屬性不會影響 CSS 變量（即它們不會被重置）。

理解var()函數

您已經在本 CSS 變量教程的一些典型示例中看到了var()函數。 但是var()的內容比我目前所介紹的要多。

首先， var()函數只在一個值中有效； 屬性名稱或選擇器不能使用 CSS 變量。 此外，媒體查詢值不能使用 CSS 變量（例如，@media @media (max-width: var(--my-var))無效）。

var()函數有兩個參數：

• 要包含的自定義屬性的名稱
• 自定義屬性無效時的後備值

這是第二個參數生效的示例：

請注意，在上面的代碼中，我使用英國或加拿大單詞“color”拼寫了初始變量名稱，但是當我使用該變量時，我合併了美國拼寫“color”。 這使得變量在技術上無效，因此純灰色 ( #ccc ) 背景改為生效。

另請注意，備用值可以包含自己的逗號。 因此，例如，如果您的後備是字體堆棧，這將是定義它的有效方法：

再次注意我的變量有一個缺陷，聲明了一個未知的--main-type而不是--main-font 。 這會觸發備用值，它是備用字體堆棧。 因此，第一個逗號之後的所有內容（甚至包括任何其他逗號）都是備用值。

將 CSS 變量用於局部變量

當定義一個 CSS 變量時，它持有的值本身不必是一個有效的 CSS 值； 它可以是可用作完整值的一部分的部分值。

例如，您可以分解字體堆棧：

在這種情況下，每個變量值都獨立工作，但它證明了這一點。 讓我們嘗試一個使用rgba()顏色符號的更人為的示例：

您可以看到這可能有多麼有用，允許您從本質上動態地“構建”值。

通過calc()使用 CSS 變量

將 CSS 變量合併到項目中的一種有用方法是與calc()函數結合使用。 您可能知道， calc()允許您在值內執行計算。 所以你可以做這樣的事情：

CSS 自定義屬性允許您將calc()提升到一個新的水平，例如使用預定義的大小。 Ahmad Shadeed 描述了類似的東西，這裡有一個例子：

有了這個，我可以在媒體查詢中使用.module和.module-*規則集，允許我有條件地針對特定視口大小或其他媒體功能顯示這些樣式。 小/中/大模塊將具有與主模塊相同的類，但僅根據需要覆蓋模塊大小。 在上面的示例中，大小的初始240值作為一種默認值，但我也可以將240px作為var()中的第二個參數傳遞以作為後備。

CSS 變量的技巧

多年來，一些開發人員分享了使用 CSS 變量的技巧和竅門。 由於這主要是初學者教程，因此我不會在這裡詳細展開這些內容，但這裡有一些簡要說明：

• 正如我之前提到的，您可以在內聯樣式中使用 CSS 變量，例如縱橫比框。
• 空格字符是 CSS 變量的有效值，它允許您執行開/關技巧（例如，對於暗模式之類的東西），您可以在 Lea 的帖子中閱讀。
• 您不能在內聯樣式中編寫懸停樣式，但您可以使用 CSS 變量來解決這個問題。
• CSS 變量有助於更輕鬆地創建多色 SVG，如此處所述。
• 您可以使用 CSS 變量構建實用且可維護的設計系統和主題，本文將詳細介紹
• 如 Michelle Barker 所述，您可以使用 CSS 變量通過網格佈局功能構建更高效且可維護的網格。

結論

CSS 變量，或 CSS 自定義屬性，現在已經可以使用了，超過 90% 的全球使用中的瀏覽器都支持這個方便的功能。 我希望對基礎知識和語法的討論能鼓勵您在最新項目中考慮 CSS 變量（如果您還沒有這樣做的話）。

如果您對 CSS 變量的使用僅限於某些全局主題顏色，那麼本教程可能會啟發您更多地使用它們，並且可能會想出一些您自己的技巧。

現在您已經完成了 CSS 變量，請查看我們的其他一些指南：

• CSS 網格佈局
• Parcel.js 簡介
• CSS flexbox 教程
• 適合初學者的 Webpack
• 面向初學者的微交互教程

如果您對此 CSS 變量教程有任何疑問，請隨時在下面的評論中提交。

Chris Fitzgerald 和 Karol K. 的佈局和演示。