如何添加 CSS 變量來自定義 WordPress 子主題

CSS 變量，也稱為 CSS 自定義屬性，允許在 CSS 樣式表中輕鬆重用。

如果您已經完成了 WordPress 子主題的工作，您可能會發現自己做了很多樣式設置並覆蓋了顏色、填充等內容。如果您是網頁設計新手，值得一提的是，使用 plain 並沒有錯CSS。 CSS 變量是可選的，隨著您變得更高級，您將開始看到變量如何使您受益。

這些並不是為了取代 CSS 預處理器，最流行的是 SASS。 許多構建器專門將 SASS 用於大型項目，並且將 CSS 變量作為核心部分，它提供了許多高級選項。

但是，如果您以前使用過預處理器，您就會知道它們需要經過編譯才能輸出 CSS。 因此，本教程將重點介紹 CSS 變量，而不會深入介紹預處理器的細節。

CSS 變量是一種令人愉快的媒介，幸運的是，有強大的瀏覽器支持。 在承諾在生產中使用 CSS 變量之前，請務必檢查我可以使用以確保它們具有您需要的支持。

CSS 變量比使用純 CSS 更有效，但不需要像 SASS 這樣的高級設置。 瀏覽器進行“編譯”，您不依賴於輸出編譯後的 CSS 的設置和環境。

這種方法是一個很好的項目，適合設計簡單的 WordPress 子主題等。 對於這樣的項目，往往需要更新樣式以創建品牌主題。 CSS 變量可以提供幫助，因為它們提供了一個可管理的樣式覆蓋列表，並且不需要特殊的環境來將 SASS 編譯為 CSS。

免費獲取 Genesis Framework 和 StudioPress 主題！

WP Engine 客戶可以訪問每個計劃標配的一套高級 WordPress 主題！ 您只需每月 20 美元即可開始構建您的下一個站點！ 在這裡了解更多。

如何使用 CSS 變量

當使用特定的顏色來保留品牌時，一個常見的要求是擁有一個可以反複使用的品牌調色板。 每次輸入相同的顏色值是多餘的。 另外，如果您想更改集合中的其中一個顏色值怎麼辦？

例如，藍色可能需要稍微深一點。 這事兒常常發生。 是的，當然有可靠的查找和替換功能。 但是，在進行此全局更改時以及重用變量時，在一個地方調整值會更有效。

這是CSS變量的樣子：

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

當我簡化 WordPress 子主題樣式的工作流程時，我已將變量添加到我的styles.css文件中。 這只是“短名單”，隨著更多人的加入，有效地命名每個變量變得很重要。

 [css] :root { --white: #ffffff; --black: #232525; --mid-gray: #eeeeee; --brand-red: #e50000; } [/css]

var() 函數

變量實際是如何使用的？ 這很簡單。 首先，聲明變量，然後在所需的 CSS 規則集中使用它。

範圍是需要注意的重要事項。 變量需要在其預期範圍內的 CSS 選擇器中聲明。 在許多情況下，您需要變量在全局範圍內可用，這樣它們就可以被任何東西訪問。 您可以為全局範圍使用:root或body選擇器。 但是，在某些情況下，您可能需要限制範圍，並希望使用局部範圍的變量。

很容易發現變量； 他們前面有兩個破折號。 需要包含兩個破折號 (–)。

var()的語法非常簡單：

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

不是在多個地方調整顏色，而是在一個地方調整變量值。

Web 檢查器（在本例中為 Chrome）允許您檢查並查看正在使用的變量。

以下示例首先定義名為--light-gray和--text-black全局自定義屬性。 調用var()函數，稍後將自定義屬性的值插入到樣式表中：

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

值得一提的是，變量在處理 CSS 斷點時非常有用。 通過在不同的斷點中使用全局範圍的變量，可以為各種尺寸定制填充和其他有用的樣式。

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

下面是可以在本地範圍內找到的變量示例。 到目前為止，我們只觸及了全局範圍，因此您會注意到事情並不在根目錄中。 這些是警告消息的樣式。 此處聲明的警告文本顏色僅對此類有用。 另外，值得注意的是calc也可以使用。

 [css] .warning { --warning-text: #ff0000; --gap: 20; color: var(--warning-text); margin-top: calc(var(--gap) * 1px); } [/css]

上面的示例涵蓋了 CSS 變量的基礎知識。 這些概念可以應用於自定義 WordPress 主題或您編寫的任何其他自定義 CSS。 與純 CSS 相比，變量具有優勢，並且可以幫助您在進行站點範圍的更改時更有效地工作。 它們允許更好地組織樣式表，而無需預處理器。

使用 WP Engine 激發創作的自由

WP Engine 支持在 WordPress 上自由創作。 該公司的產品是所有 WordPress 提供商中速度最快的，為 150 萬種數字體驗提供支持。 世界上排名前 200,000 的站點中有更多的站點使用 WP Engine 來增強他們的數字體驗，這比 WordPress 中的任何其他站點都要多。 在 wpengine.com 上找到我們的更多信息或立即與代表交談！