css variable的使用方法和好處有哪些？

王铁柱6發表於2024-12-08
CSS

CSS 變數（也稱為 CSS 自定義屬性）使用 -- 開頭，例如 --main-color: #007bff;。它們可以在文件的根、任何元素或特定選擇器中宣告。 使用方法和好處如下：

使用方法：

  1. 宣告變數： 在選擇器中使用 -- 字首宣告變數。例如：

    :root {
  --main-color: #007bff;
  --font-size: 16px;
}

.container {
  --container-width: 80%;
}

  2. 使用變數： 使用 var() 函式訪問變數值。例如：

    body {
  color: var(--main-color);
  font-size: var(--font-size);
}

.container {
  width: var(--container-width);
}

  3. 回退值： var() 函式可以接受第二個引數作為回退值，如果變數未定義或無效，則使用回退值。例如：

    body {
  color: var(--main-color, black); /* 如果 --main-color 未定義，則使用 black */
}

  4. JavaScript 操作： 可以使用 JavaScript 獲取和設定 CSS 變數的值，實現動態樣式控制。例如：

    // 獲取變數值
const mainColor = getComputedStyle(document.documentElement).getPropertyValue('--main-color');

// 設定變數值
document.documentElement.style.setProperty('--main-color', 'red');

好處：

  1. 可維護性： 將顏色、字型大小等常用值定義為變數，方便統一修改和維護。只需要在一個地方修改變數值，就可以影響所有使用該變數的地方。
  2. 可重用性： 可以在不同的選擇器、元素甚至不同的樣式表中重複使用相同的變數。
  3. 級聯和繼承： CSS 變數遵循級聯和繼承規則，可以根據需要在不同層級定義和覆蓋變數。
  4. 動態樣式： 可以使用 JavaScript 動態修改 CSS 變數的值，實現更靈活的樣式控制，例如主題切換、響應式設計等。
  5. 程式碼簡潔性： 使用變數可以減少重複程式碼，使樣式表更簡潔易讀。
  6. 提高效能： 相比於使用前處理器（如 Sass、Less），CSS 變數在瀏覽器原生支援，無需編譯，可以提高效能。

示例：主題切換

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

.dark-theme {
  --primary-color: #212529;
  --secondary-color: #adb5bd;
}

button {
  background-color: var(--primary-color);
  color: white;
}

.highlight {
  color: var(--secondary-color);
}

透過切換 dark-theme 類，可以輕鬆切換主題顏色。

總而言之，CSS 變數是強大的 CSS 工具，可以提高程式碼的可維護性、可重用性和靈活性，是現代前端開發中不可或缺的一部分。

相關文章