CSS 變數是一種在 CSS 中定義的值，可以在整個 CSS 文件中重複使用。它們提供了一種簡單而強大的方式來管理和共享樣式中的值，使代碼更具可讀性、可維護性和可重用性。CSS 變數使用 -- 作為前綴，例如 --main-color。

定義變數

要定義一個 CSS 變數，使用 -- 作為前綴，然後指定變數名稱和值。變數名稱通常使用有意義的名稱，例如：

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

在這個示例中，我們在 :root 選擇器中定義了兩個變數，--main-color 和 --text-color，分別代表主要顏色和文本顏色。

使用CSS變數

使用 CSS 變數時，使用 var() 函數來引用變數的值。例如：

.header {
  background-color: var(--main-color);
  color: var(--text-color);
}

複寫變數值

CSS 變數的一個重要特點是它們可以被覆寫。可以在特定的 CSS 選擇器中重新定義變數的值，這將影響該選擇器及其子元素。例如：

.header {
  --main-color: #e74c3c; /* 覆寫 --main-color 變數的值 */
}

變數的用途

• 代碼重用性： 透過定義變數，可以在整個樣式表中重複使用相同的值，從而減少代碼重複性。
• 易於維護： 通過單獨修改變數的值，可以輕鬆更改多個元素的樣式，提高代碼的可維護性。
• 可讀性： 使用有意義的變數名稱可以提高代碼的可讀性，使其更容易理解。
• 提高一致性： 透過變數，可以確保相同的值在整個樣式表中保持一致。
• 減少錯誤： 使用變數可以減少由於手動更改多處相同的值而引起的錯誤。