了解CSS變量（以及如何使用它們）
已發表: 2025-07-13CSS變量就像可重複使用的設計成分一樣。您將它們定義為品牌顏色，字體大小或間距，然後在需要的任何地方使用它們。它們使您免於在不同部分鍵入相同的十六進制代碼和像素值。
他們最大的好處是他們很容易更新。如果您一次更新一個變量，則使用的每個地方也會反映更改。因此，您不僅避免在多個部分中手動重複相同的值，而且還可以通過更改一個值來調整整個網站的外觀。
在這裡變得更好：使用Divi 5，您無需編寫任何代碼即可使用CSS變量。 Divi的設計變量可讓您在視覺，無代碼工作流程中使用它們。好奇它是如何工作的？繼續閱讀。
- 1什麼是CSS變量？
- 1.1 CSS變量如何工作
- 1.2了解CSS變量級聯
- 1.3添加後備值
- 2一種在Divi 5中使用CSS變量的無代碼
- 2.1定義Divi 5中的CSS變量
- 3 Divi 5如何使CSS變量工作流程毫不費力
- 3.1 1。創建您的設計框架
- 3.2 2。使用選項組預設進行靈活樣式
- 3.3 3。聲明自定義CSS變量以進行更多控制
- 4 Divi為CSS變量提供了內置方法
什麼是CSS變量？
將CSS變量視為您為自己的設計習慣創建的自定義標籤。您最喜歡的圖像邊框半徑是什麼？您通常在各節之間留多少間距？您是否在任何地方使用簽名按鈕顏色？您可以將所有這些獨特樣式變成CSS變量。
這些不是瀏覽器默認知道的值。一切都是自定義的。您可以決定名稱，分配您的首選值，然後在任何需要的地方使用它。這就像創建自己的速記，使造型更快，更清潔且以後更易於更新。
讓我們舉個例子。假設您希望您的網站的主要顏色為＃007BFF。您會這樣聲明：
:root {
--primary-color: #007bff;
}
在這裡，“ - 主要色”是您的變量名稱，“＃007BFF”是其值。您剛剛在瀏覽器可以識別的自定義標籤中存儲了一種顏色。
要使用它，您不會重寫十六進制代碼。您將其調用var（）函數中的變量：
button {
background-color: var(--primary-color);
}一行代碼可確保您的按鈕始終從–primary-Color中提取值。
現在，您可以在需要的地方使用它，並且是時候更新品牌顏色了，就無需挖掘數十個文件。只需更改一個變量，它使用的每個元素都會自動更新。例如，您的按鈕，標題和邊界都使用 - 主要色。單個編輯將全部更新。
這就是CSS變量簡化網站範圍更新的方法。
CSS變量如何工作
要聲明CSS變量，基本語法看起來像這樣：
.root {
--name: value;
} 有幾件事要注意。首先， CSS變量總是以兩個破折號開始（ - ）。這就是瀏覽器知道它的自定義的方式，這是您為設計系統定義的。
內置的CSS屬性（例如字體大小，顏色或填充）已經具有意義。瀏覽器確切地知道該如何處理它們。但是自定義屬性是空白標籤，直到您為它們分配一個值。您正在網站項目中創建自己的設計規則，例如 - 彩色，並告訴瀏覽器它的代表。
定義CSS變量的地方也有很大的不同。
當您將其放在：根選擇器中（就像我們上面所做的那樣）時，它將變成全局。這意味著您可以在任何頁面和元素上使用變量。那是因為：root針對HTML的頂級元素，通常是<html>標籤。
但是，如果您在特定類或選擇器中定義了相同的變量，則僅在該位置起作用。像這樣：
.card {
--bg-color: #f4f4f4;
} 在這裡，–bg-color僅適用於.Card選擇器。嘗試在其他地方使用它，並且不會出現。例如，下面您會看到兩張卡。
卡1使用在.card容器內聲明的本地定義變量-CARD-BG。該變量僅在該容器內部起作用。它不適用於卡3。
另一方面，卡2從–Global-Color中拉出其背景，該背景在以下方面定義：root。這就是為什麼Card 4也可以選擇相同的顏色的原因。它可以訪問全局變量。
作為最佳實踐，如果您希望在整個網站上保持一致性，請始終以：root定義CSS值。如果您在本地定義了一個變量並忘記了它，但是現在它沒有按預期工作？您將通過設置後備值來解決此問題。我們將在一段時間內談談。
了解CSS變量級聯
您可能熟悉“級聯”一詞。好吧，CSS變量也級聯，但這是什麼意思？
如果在全球（root）和局部（類或容器內部）上同時定義了變量，則瀏覽器將始終將一個更接近元素使用。這就是級聯在CSS中工作的方式。更接近的規則優先。
這正是黑暗模式的工作方式。
例如，您可以定義–Text-Color：Black in：root。但是在.dark-Mode的容器中，您可以將其重新定義為白色。因此，當用戶在“暗模式”選項上切換時，即使變量名稱保持不變，瀏覽器也將在.dark模式內使用本地版本。
這使您可以在基於上下文調整樣式的同時保持命名一致。這是CSS變量超越簡單可重複性的一種方式。他們根據使用的位置和方式來適應。
添加後備值
有時，您可能會引用不可用的CSS變量。也許它只是在特定部分中定義的，或者錯誤地將其刪除。發生這種情況時，瀏覽器不知道該怎麼辦。依賴於該變量的樣式根本不會應用。
您可以直接在var（）函數中添加一個後備值，以防止這種情況。如果缺少原始變量，它將用作備份。這是其工作原理：
h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
} 這告訴瀏覽器使用 - 如果存在 - 飾面。如果不是，請改用黑色（＃000）。
當構建可重複使用的組件或跨變量可能不總是可用的多個部分工作時，後備尤其有用。它們使您的設計保持穩定和一致。
您甚至可以鏈條後備，例如顏色：var（accent-color，var（ - primary-color，＃333））;
在這裡，瀏覽器首先檢查–Accent-Coloror。如果缺少，它會嘗試 - 主要色。如果也缺少，則默認為＃333。這為您的樣式提供了安全網，因此即使缺少某些值，它們也會繼續正確渲染。
在Divi 5中使用CSS變量的一種無代碼
您看到的有關CSS變量的所有內容（全局控制，可重複使用的值，級聯邏輯）聽起來很棒，但它也帶有一個捕獲：您需要編寫和管理代碼。對於許多設計師來說，這不是理想的。如果您喜歡視覺設計怎麼辦？這意味著您不能使用CSS變量，對嗎？錯誤的。
Divi 5為您提供了一種使用相同CSS變量邏輯的更快，更視覺上的方式。它引入了設計變量，這是Divi Builder構建的CSS變量的無代碼替代方案。
訂閱我們的YouTube頻道
設計變量（例如CSS變量）是您定義一次並在網站上使用的可重複使用的值。不同的是您的做法。您不會在網站的樣式表中定義它們，而是在視覺上在Divi Builder內部的變量管理器中定義它們。
像CSS變量一樣，您給出設計變量一個名稱並分配值。保存後，它將在支持該屬性的任何模塊中可用。
應用保存變量也很容易。只需通過懸停在模塊的設置選項上來找到變量管理器圖標，單擊它以填充所有保存的變量，然後選擇要應用的變量即可。
關於設計變量的最好的部分不僅是設計值，而且還可以保存可重複的內容值，例如圖像，鏈接和文本字符串。這樣，您可以通過在整個網站中重複使用無手動工作來有效地管理重複的內容。
了解有關Divi 5的設計變量的所有內容
定義Divi 5中的CSS變量
這意味著設計變量替換CSS變量嗎？不完全是。
設計變量非常適合存儲您經常使用的值，例如品牌顏色，但並非每種樣式都需要全球。您將不一定總是想將所有小調作為設計變量保存，尤其是當它是單個頁面唯一的時。
假設您正在使用自定義英雄部分創建著陸頁。高度與網站上的其他任何內容都不同，您不太可能重複使用它。將其保存為設計變量並不是您全球庫的最佳用途。在這種情況下，直接在頁面設置中定義CSS變量是一個更乾淨的選擇。
同樣的是複雜或一次性佈局。也許您需要自定義的突出顯示顏色或僅在此上下文中相關的特定佈局間距值。您可以在需要的地方定義CSS變量，而不是將系統擁擠，而是永遠不會重複使用。
我們不希望您用設計變量替換CSS變量。我們希望您同時使用兩者。
這就是為什麼Divi 5使定義CSS變量變得容易的原因。您可以輕鬆地在頁面設置內部聲明自己的CSS變量>“高級”>“自定義CSS” ，就像在常規CSS中一樣。
但是我們確實簡化了他們的應用程序。定義後，您可以在該頁面上使用這些變量。轉到任何模塊，從高級單位下拉列表中選擇CSS var ，然後在Var（）函數中輸入變量名。
這種方法在需要時為您提供靈活性，而無需您將所有內容都投入到視覺設計變量系統上。這是結構和創造自由之間的平衡。
在Divi 5中使用CSS變量
Divi 5如何使CSS變量工作流程毫不費力
現在您知道CSS變量是什麼，以及Divi 5如何在視覺上支持它們，這就是為什麼這確實重要的原因。這不僅是因為Divi為您提供了兩種使用CSS變量的方法。這是因為它使它們與您的工作流程順利集成。
您可以輕鬆地使用具有功能強大功能的CSS變量，例如設計變量，選項組預設和高級單元。您仍然可以獲得傳統CSS的所有靈活性和可擴展性，但是除非您選擇，否則您沒有編寫一行代碼。
讓我們瀏覽Divi 5如何使這種工作流程栩栩如生。
1。創建您的設計框架
設計變量確實很強大，因為您可以在視覺上構建整個設計框架，因此造型頁面只需單擊幾下即可。我們建議您從您的基本設計元素（例如字體尺寸，間距單元和品牌顏色）開始，因此您將它們全部放在一個地方。
然後，您還可以保存經常使用的內容，例如文本字符串，URL和圖像。例如，一個共同的背景圖案，在不同部分，社交媒體鏈接，電子郵件，地址等之間重複出現。
一旦將框架安裝到位，一切都會變得更加容易。您無需返回根本樣式圖即可找到變量或記住確切的名稱。 Divi為您組織它們： “顏色”選項卡中的顏色， “字體”選項卡中的字體，以及在變量管理器中訪問。
而且，當您的網站需要設計更新時，您不會浪費時間來編輯模塊，也不會浪費長時間的樣式表。您將一次在變量管理器中更新保存的值，並且更改在每個實例中立即適用。
相同的CSS級控制，但無需記住，寫作或調試任何內容。
2。使用選項組預設進行靈活樣式
期權組預設可為您提供對設計系統的更詳細的控制。您可以為不同的用例創建多個設計選擇，而不是在網站上應用一組樣式，所有這些選擇都是由相同的基礎設計變量構建的。
在這裡，您正在分層。您在變量管理器中定義核心值一次，然後創建從這些值中提取但以略有不同方式應用它們的不同預設。如果您曾經更新保存的變量值，則該更改會立即反映出所有預設和應用的模塊。
這種基於預設的設計系統可幫助您創建無限的樣式組合。例如，您可能使用相同的字體大小變量，但具有不同的間距，權重或文本變換，因此您可能有一種針對主頁英雄的標題樣式，而博客標題的另一種標題樣式。
結構保持乾淨。樣式保持一致。並且在需要時，您可以在模塊級別上覆蓋任何預設。因此，您可以在不失去創意自由的情況下獲得全系統的控制。
3。聲明自定義CSS變量以進行更多控制
如您所知，Divi不會將您拒之門外。如果要定義自己的CSS變量，則可以通過頁面設置>“高級>自定義CSS”絕對這樣做。但這不是有趣的部分。
有趣的是，它允許您使用clamp（）和cal（）（感謝高級單元）（感謝高級單元）等功能強大的CSS函數來視覺上構建流體，響應式佈局。您還可以將保存的CSS變量用作設計變量的值。
這可以幫助您構建一個更相互聯繫的設計系統。您的CSS邏輯和視覺樣式不再存在於單獨的孤島中。您可以在CSS中定義一個值，並在需要時視覺上從其視覺上拉出一個值。它可以使您的工作流液保持，可擴展且易於維護。
您可能會發現這是壓倒性的，但是一旦您了解了它是如何一起工作的，就再也沒有回頭路了。它改變了您設計，思考和構建的方式。從變量系統開始的開始，很快就變成了您的設計語言。是的，這些工具很強大，但是它們本來要圍繞您的流程形成。花點時間，探索適合自己的風格，並建立適合您的工作流程。
Divi為CSS變量提供了內置方法
使用CSS變量設計，用於在靈活性和復雜性之間進行選擇。 Divi 5擦除了變量，視覺控制，網站範圍更新和分層邏輯的全部功能，成為直觀且可擴展的工作流程。
您不必在自定義CSS和無代碼設計之間進行選擇。隨著項目的增長，您可以混合，匹配和發展系統。一旦您看到這可能是多麼平穩和強大，就很難想像建立其他任何方式。但是為此，您需要控制自己。
嘗試為自己嘗試Divi 5，並建立一個與您合作的設計系統，而不是與您不利。