CSS 變數入門：打造更靈活高效的網頁樣式
更新日期： 2024 年 9 月 14 日
什麼是 CSS 變數？
CSS 變數，也稱為自定義屬性（Custom Properties），是一種可以在 CSS 中定義、重用和修改的值。
與傳統的 CSS 寫法不同，CSS 變數允許你將某些常用的樣式值。
如顏色、字體大小、間距等，存儲在一個變數中，然後在整個樣式表中多次使用這些變數。
這樣做不僅可以讓你的樣式表更簡潔、可維護，還能提高樣式的一致性。
為什麼要使用 CSS 變數？
CSS 變數帶來了許多傳統 CSS 無法提供的靈活性和便利性，特別是在處理大型項目或設計複雜的網站時。
以下是使用 CSS 變數的幾個主要原因：
提高樣式的一致性
在一個網站或應用程序中，通常需要在多個地方使用相同的樣式屬性，。
例如顏色、字體大小、邊距等。
傳統的 CSS 需要你在每個地方手動指定這些值。
這不僅容易出錯，還會導致樣式的不一致。
例如，稍有不慎，你可能會在一個地方使用了錯誤的顏色值，導致界面看起來不統一。
CSS 變數通過允許你在一個地方定義這些值，然後在整個樣式表中多次引用它們，大大減少了這種情況的發生。
這樣一來，你可以確保網站或應用程序中的顏色、字體等風格保持一致。
減少重複代碼
當你在網站中使用相同的顏色、間距或其他樣式時，傳統的 CSS 會要求你在每個使用這些樣式的地方重複相同的代碼。
這不僅增加了樣式表的體積，也讓代碼變得難以維護。
尤其當你需要在不同的媒體查詢，或主題中重複相同的樣式時，問題會變得更為突出。
CSS 變數允許你將這些重複的樣式值提取為變數，然後在需要的地方引用它們。
這樣，你只需定義一次變數，就可以在多個地方重複使用，從而大幅減少了重複代碼的數量。
提高可維護性
在網站開發過程中，設計或品牌要求的變更可能會頻繁發生。
例如，品牌的主色調可能會從藍色改為紅色，或者標題字體需要調整。
如果你在傳統的 CSS 中手動指定了顏色和字體大小，那麼每次變更都需要逐一修改，這是一項繁瑣且容易出錯的工作。
使用 CSS 變數，你只需修改一次變數的值，就可以立即在整個網站中應用這些變更。
這不僅節省了時間，還降低了出錯的風險，讓樣式的維護工作變得更加輕鬆。
語法介紹
我們將介紹 CSS 變數的基本語法，包括如何定義變數、使用變數，以及特定選擇器如 :root 的作用。
什麼是選擇器
:root 是一個 CSS 伺服選擇器，它選中的是文檔樹的根元素。
在 HTML 中，這個元素通常是 <html>。使用 :root 選擇器來定義 CSS 變數，可以讓這些變數具有全局作用域，即在整個樣式表中都可以使用。
:root {
--main-color: #3498db;
--font-size: 16px;
}在這個示例中，我們定義了兩個全局變數：–main-color 和 –font-size。
由於這些變數是在 :root 中定義的，因此可以在整個文檔中隨意使用。
變數宣告方式
CSS 變數的宣告非常簡單，格式如下：
--變數名: 值;這裡，–變數名 是變數的名稱，前面必須加上兩個連字符（--）。
值 則是你想要為這個變數設定的值，這個值可以是任何有效的 CSS 屬性值。
例如顏色、字體大小、間距等。
:root {
--primary-color: #ff6347;
--secondary-color: #4caf50;
--padding-size: 20px;
}
在這個示例中，我們宣告了三個變數：–primary-color、–secondary-color 和 –padding-size。
這些變數可以用來表示顏色和間距，並且可以在樣式表的其他部分引用。
變數使用方式
定義了 CSS 變數後，你可以在樣式中使用 var() 函數來引用它們。
var() 函數的格式如下：
var(--變數名, [可選] 後備值);–變數名 是你要使用的變數名稱，後備值是可選的。
當變數未定義或無法使用時，瀏覽器會使用後備值。
body {
background-color: var(--primary-color);
color: var(--secondary-color);
padding: var(--padding-size);
}在這個示例中，body 元素的背景顏色、文字顏色和內邊距，都使用了我們之前定義的變數。
這樣做的好處是，如果我們需要更改顏色或間距，只需在 :root 中修改變數的值即可，無需逐一修改每個使用這些屬性的地方。
header {
background-color: var(--header-bg-color, #333);
}在這個例子中，我們為 –header-bg-color 提供了一個後備值 #333。如果 –header-bg-color 沒有被定義，瀏覽器將使用後備值 #333 作為 header 元素的背景顏色。