變量是任何軟體應用程式的基本建構塊。它們減少了程式中開發人員的備援任務，并儲存了必須在整個程式中使用的值。網站有點不同。Web程式設計的新手可能不知道變量存在于Web開發的前端以及CSS中。變量的作用與使用C++、Python 等完成實作時的作用相同。
CSS 變量（也稱為自定義屬性）是一種現代 CSS 規範，由于浏覽器的廣泛支援，它越來越突出。它減少了編碼和維護時間，并允許您開發跨浏覽器相容的網站。它還有助于聲明值以在CSS檔案中重用，這在以前隻有使用預處理器（如Sass和LESS）時才有可能。
我們将探索什麼是CSS變量以及如何在CSS中使用變量來建立漂亮的響應式網站。最後，我們将用實際示例來支援它。讓我們開始吧！
What Are CSS Variables? 什麼是CSS 變量
CSS 變量是自定義屬性，您可以在其中存儲值并在 HTML 代碼中的任何位置使用它。它們是在Chrome 49中引入的，從那時起就非常受歡迎。但是，與支援簡單初始化和替換文法的程式設計語言不同，CSS變量需要專門定義，無論它們是初始化還是替換。是以，這兩件事都有其單獨的文法。
CSS 變量的初始化是通過在變量名稱前面加上“–”來完成的。例如，以下文法将變量“my_font”初始化為 20px。
--my_font: 20px;
“my_font”變量現在可以在代碼中的任何位置使用，值為“20px”。接下來是替換部分。将屬性替換為變量隻能由 “var（）” CSS 屬性完成。在“var（）”中，我們拼寫變量名稱，如下所示：
:
| 1 2 3 | selector { font-size : var(--my_font); } |
在上面的文法中，由于my_font變量，選擇器的字型大小将變為 20px。“var（）” 除了變量名稱之外，還需要另一個參數 – 預設值。預設值在變量替換中充當安全網。在發現變量值不可通路的情況下，将使用回調值來代替它。預設值可以聲明如下：
:
| 1 | font-size: var(--my_font, 20px); |
預設值在不同方面的工作方式不同。我們将在本文後面讨論這一點，并提供一些與 Web 浏覽器相關的有趣插圖。
Importance Of CSS Variables ，CSS變量的作用
在我們繼續了解如何在 CSS 中使用變量之前，讓我們探讨一下在 CSS 中使用變量的一些好處。作為Web開發人員，您将能夠與之相關，并回顧使用它們您的生活将如何更輕松。
1. 減少備援代碼
變量删除代碼中的備援。例如，假設我們有一個非常小的網頁要求，所有标題（h标簽）都是相同的“顔色：紅色”。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>CSS Variables</title> <style> h2 { color: red; } h3 { color: red; } h4 { color: red; } </style> </head> <body> <center> <h2>I am heading 2</h2> <h3>I am heading 3</h3> <h4>I am heading 4</h4> </center> </body> </html> |
到目前為止，一切看起來都不錯，我們在網頁上得到了正确的輸出。
現在，假設團隊決定将每個标題的顔色更改為綠色。為此，我們必須在頁面上進行三次“查找和替換”，這是可以接受的。但是，建構一個真正的網站呢，隻需一次更改即可完成 100 次或更多次
CSS 中的變量消除了系統中的這種備援，我們隻需要更改一次顔色 - 在變量的值中。
浏覽器相容情況
Conclusion 總結
作為一名 Web 開發人員，變量一直是我的樣式表的一部分。我相信今天和他們成為朋友之後，你也會開始經常使用它們。CSS 中的變量從代碼中删除了備援，最好的事情是它們隻是 CSS 中的另一個屬性。但是，在實作CSS變量之後，您必須對網頁設計執行響應能力測試。您可以按照響應式網頁設計清單來簡化整個響應能力測試過程。