CSS 變數 – 產生動態和可自訂設計效果的能力在 Web 開發領域至關重要。自訂屬性或 CSS 變數提供了實現此領域的方法，允許開發人員在樣式表中指定可重複使用的值並在執行時間動態修改它們。這篇部落格文章將透過一個突出其動態功能的實際範例來探討 CSS 變數。

理解 CSS 變數
樣式表的可重複使用值可以透過使用 CSS 變數來定義和使用。它們使用 — 前綴後跟名稱來聲明，通常在 :root 偽類中以實現全域可用性。它們可用於儲存字體、顏色、寬度、高度等值。這些變數在 CSS 程式碼中定義後甚至可以在其他檔案中使用。 （了解更多）

CSS 變數是這樣定義的：

:root {
  --main-color: #3498db;
}

在此範例中，我們定義了一個名為 –main-color 的變量，其值為#3498db。我們已經在 :root 偽類中聲明了它，這確保了該變數在 CSS 程式碼中的任何位置都可以存取。

如何使用 CSS 變數
定義後，您可以在 CSS 程式碼中的任何位置使用 var() 函數來存取 CSS 變數。

Var():

CSS 變數 var() 允許您輸入自訂屬性的值來取代另一個屬性的部分值..

句法 ：

var(--custom-property);

例子 ：

.element {
  color: var(--main-color);
}

在此範例中，我們使用 –main-color 變數來設定元素的文字顏色。如果您決定稍後更改主顏色，您所能做的就是更新變數的值，它將自動反映在使用它的所有元素上。

1.創造動態主題顏色
輸出

考慮這樣一種情況，您想要設計一個主題顏色動態變化的網頁。您希望能夠為使用者提供點擊按鈕的選項，然後看到頁面的整個配色方案發生變化。讓我們看看 CSS 變數如何實現這一點。 （閱讀更多關於 CSS 變數的資訊）

HTML:

  
  
  
  


  

    
Dynamic Theme - CSS Variables
  

  Change Theme Color

  

CSS:

:root {
  --primary-color: #3498db;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  text-align: center;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
}

Javascript:

document.getElementById('changeColorBtn').addEventListener('click', function() {
  // Generate a random hex color
  var randomColor = '#'   Math.floor(Math.random()*16777215).toString(16);

  // Set the random color as the new primary color
  document.documentElement.style.setProperty('--primary-color', randomColor);
});

此範例顯示了一個帶有按鈕和標題的網頁。按鈕和標題的背景顏色是使用 –primary-color CSS 變數自訂的，該變數的預設值為#3498db。點擊按鈕後，JavaScript 腳本會建立一個隨機的十六進位顏色程式碼，然後將其指定為 –primary-color 變數的新值。按鈕和標題的主題顏色動態變化，為使用者帶來有趣的互動體驗。

結論
在 Web 開發中，CSS 變數提供了一種通用且有效的樣式管理方法。透過定義可重複使用值並動態應用它們，開發人員可以建立更易於維護和可自訂的網站。 CSS 變數提供了廣泛的工具集來提高線上專案的樣式功能，無論重點是主題、回應能力還是動畫。要在您的設計中充分利用它們，請開始將它們整合到您的 CSS 工作流程中！ （閱讀更多關於 CSS 變數的資訊）