CSS 程式札記 : 變量(Variables)

在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。

什麼是 CSS 變量？

CSS 變量可以將一個值儲存在一個自定義的屬性中，然後在整個樣式表中重複使用該值。這意味著你可以在一個地方定義一個值，並在多個地方引用它，從而使你的 CSS 更加整潔和可維護。

CSS 變量基本語法

在 CSS 中，變量以 -- 開頭，後面跟著變量名。你可以在任何選擇器中定義變量，但通常它們被定義在 :root 偽類中，這樣就可以在全局範圍內使用。

:root {
  --main-color: #4CAF50;
  --font-size: 16px;
}

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

在這個範例中，我們在 :root 偽類中定義了兩個變量 --main-color 和 --font-size，並在 body 選擇器中使用它們。這樣，如果我們想要更改主要顏色或字體大小，只需要在 :root 中修改變量的值即可。

為什麼使用 CSS 變量？

CSS 變量提供了許多優勢，使得它們成為現代網頁設計的重要工具：

1. 維護性：當你需要修改一個在多個地方使用的值時，你只需要在一個地方更新該值，而不是在每個地方手動更改。
2. 可讀性：變量名可以提供關於它們用途的提示，使你的代碼更容易理解。
3. 靈活性：你可以根據不同的條件輕鬆更改變量的值，例如在不同的媒體查詢。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡