10.1 宣告變數
CSS 中的變數，也叫做自訂屬性 (CSS Custom Properties)，讓開發者能夠把屬性的值存放在一個地方，然後在文件中重複使用。這使得 CSS 更加靈活且易於管理，特別是在處理大型專案時。
宣告變數
在 CSS 中，變數是用兩個破折號 (--) 放在變數名稱之前來宣告的。通常，它們是在 :root 選擇器內宣告的，這樣能夠讓整個文件都可以存取到。
語法：
:root {
--變數名稱: 值;
--變數名稱: 值;
}
範例：
在這個範例中，宣告了三個變數：--main-color、--secondary-color 和 --font-size。
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 使用變數
要使用變數，可以使用 var() 函數，該函數將變數名稱作為參數傳入。
語法：
選擇器 {
屬性: var(--變數名稱);
屬性: var(--變數名稱);
}
範例：
這個範例使用先前宣告的變數來設置 <body> 元素的背景、文字顏色和字體大小。
CSS
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 繼承和覆蓋變數
CSS 變數會沿著元素的層次結構進行繼承。這意味著，如果變數在某個元素內宣告，那麼它的子元素也可以存取到該變數。變數也可以在其他選擇器內覆蓋。
範例：
在這個範例中，元素 .header 覆蓋了變數 --main-color，這個新變數只應用於它。同時，元素 .footer 使用了在 :root 中宣告的變數值。
HTML
<div class="header">Header</div>
<div class="footer">Footer</div>
CSS
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 使用 CSS 變數的優勢
1. 簡化樣式管理：
變數允許你在一個地方更改屬性的值，然後這個更改將自動應用到使用該變數的所有地方。這對於主題化和保持一致的風格特別有用。
2. 改善代碼的可讀性和可維護性：
使用變數使得 CSS 代碼更具可讀性和可理解性，因為變數可以用來描述那些可能具有語義意義的值，如顏色和尺寸（例如，--main-color 比 #3498db 更易懂）。
3. 動態更新樣式：
可以使用 JavaScript 動態改變變數，這樣可以創建更具互動性和動態的用戶界面。
GO TO FULL VERSION